随机颜色和动态改变字体大小
先看随机颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机一个颜色</title>
<style>
#div {
width:400px;
height: 400px;
margin: 50px auto;
text-align: center;
line-height: 400px;
background: red;
font-size: 30px;
}
</style>
<script>
/*
光的三原色 红 绿 蓝
rgba(255, 255, 255, 1);//li用rgba这种颜色模式，因为都是数字可以随机
parseInt(Math.random() * 256);
*/
window.onload = function(){
var oDiv = document.getElementById('div');
setInterval(function(){ //用定时器每隔1s换一次背景
oDiv.style.backgroundColor = randomColor();
},1000);
}
/*--------------随机颜色函数------------------*/
function randomColor(){
//用字符串拼接 成 rgba(num, num, num, 1); 的形式 因为只要用 + 拼接 结果一定是字符串 ，刚好属性后面传入的也是字符串即 backgroundColor ='rgba(num, num, num, 1)'
var str = 'rgba(' + parseInt(Math.random() * 256)+', '+parseInt(Math.random() * 256)+', '+parseInt(Math.random() * 256)+', '+1 + ')';
return str;
}
/*--------------随机颜色函数end------------------*/
</script>
</head>
<body>
<div id="div">div文本</div>
</body>
</html>
浏览器效果：
我们增加些难度，让div文本这几个字 每放大6次，再缩小6次，来回重复
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机一个颜色加文本每放大6次缩小6次</title>
<style>
#div {
width:400px;
height: 400px;
margin: 50px auto;
text-align: center;
line-height: 400px;
background: red;
font-size: 30px;
}
</style>
<script>
/*
光的三原色 红 绿 蓝
rgba(255, 255, 255, 1);//li用rgba这种颜色模式，因为都是数字可以随机
parseInt(Math.random() * 256);
*/
window.onload = function(){
var oDiv = document.getElementById('div');//获取div元素节点
var speed = 5; //每次增加的数
var count = 1;
setInterval(function(){ //用定时器每隔1s换一次背景
oDiv.style.backgroundColor = randomColor();
//<1>当前字体大小
var currentFontSize = parseInt(getStyle(oDiv,'fontSize'));
//<2>设置新的字体大小
oDiv.style.fontSize = currentFontSize + speed + 'px'; //[注] getStyle（）只能获取当前属性有效值，但是不能用来设置样式。设置样式要用节点元素属性的方法。
if(count % 6 == 0){//如果是6的倍数时，符号反转一次
speed *= -1;
}
count++;
},1000);
}
/*--------------随机颜色函数------------------*/
function randomColor(){
//用字符串拼接 成 rgba(num, num, num, 1); 的形式 因为只要用 + 拼接 结果一定是字符串 ，刚好属性后面传入的也是字符串即 backgroundColor ='rgba(num, num, num, 1)'
var str = 'rgba(' + parseInt(Math.random() * 256)+', '+parseInt(Math.random() * 256)+', '+parseInt(Math.random() * 256)+', '+1 + ')';
return str;
}
/*--------------随机颜色函数end------------------*/
/*---------------封装的获取当前有效属性函数的兼容写法--------*/
// 浏览器兼容写法
function getStyle(node, styleType){
return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType];
}
/*---------------封装的获取当前有效属性函数的兼容写法end--------*/
</script>
</head>
<body>
<div id="div">div文本</div>
</body>
</html>
浏览器效果：
