069|改变字体的颜色和大小
程序员文章站
2022-07-10 20:20:14
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>069改变字体的颜色和大小</title>
<style>
#div1{width:400px;height: 200px;background-color: white;border:1px solid black;margin:100px auto;text-align: center;line-height:200px;font-size: 18px;}
</style>
<script>
/*
写一个定时器，每一个一秒修改一次div内为本颜色和文字大小
最开始是默认大小，大小开始增大，当增大了6次以后，文字
大小开始缩小，缩小6次，文字再开始增大
*/
/*
颜色随机
rgba(255,255,255,0)
parseInt(Math.random()*256);
*/
//跨浏览器的兼容
function getStyle(node,cssStyle){
return node.currentStyle?node.currentStyle[cssStyle]:getComputedStyle(node)[cssStyle];
}
function randomColor(){
var str="rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+",1)";
return str;
}
// alert(randomColor());
window.onload=function(){
var oDiv=document.getElementById("div1");
var speed=5;//每一次变化的大小
var count=0;//计数
//定时器，每隔一秒
setInterval(function(){
oDiv.style.color=randomColor();
//alert(oDiv.style.color);
//1.将字体上一次的字体大小取出
var iCur=parseInt(getStyle(oDiv,'fontSize'));
//变化字体大小，重复赋值回去
//alert(iCur);
oDiv.style.fontSize=iCur+speed+'px';
count++;
if(count%6==0){
speed*=-1;
}
},1000);
}
</script>
</head>
<body>
<div id="div1">学习使我快乐</div>
</body>
</html>