4.一个字体的随机颜色及有规律的大小变化

最新推荐文章于 2024-08-17 17:03:17 发布

WDKKING

最新推荐文章于 2024-08-17 17:03:17 发布

阅读量2.3k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/WDKKING/article/details/69663429

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 1.一个定时器，每隔0.1s修改div内的文字颜色和文字大小，开启时文字增大，6次后文字缩小

onload = function () {

var Divv = document.getElementsByTagName("div")[0]; // 声明并提取div的值

var text = document.getElementsByTagName("p");// 声明保存文字的值

var arr = ["10px","15px","20px","25px","30px","35px","30px","25px","20px","10px"]; //声明一个数组因为是6次变大再变小的循环

var timm = 0; // 声明一个变量用来保存计时器

var n = 0; //申明一个下标的变量

timm = setInterval(function () {

var a = parseInt(Math.random()*256);

var b = parseInt(Math.random()*256);// 随机的颜色，加拼接，注：一定要写在计时器的内部

var c = parseInt(Math.random()*256);

var f = "rgb"+"("+a+","+b+","+c+")";

text[0].style.fontSize = arr[n%arr.length]; //文字中的文字由p（一个元素）在不断变换字体的大小

Divv.style.color = f; //随机字体的颜色

n++; //每运行一次自动加1

},100)

}

// 另一种优化的方法

onload = function () {

var Divv = document.gelElementsByTagName("div")[0];

var text = document.gelElementsByTagName("P");

var timm = 0;

var n = 0;

var num = 0;

text[0].style.fontSize = "10px"; // 初始化一个字体的大小

timm = setInterval( function () {

var a = parseInt( Math.random() *256 );

var b = parseInt( Math.random() * 256);

var c = parseInt( Math.random() * 256);

var f = "rgb" + "("+a+","+b+","+c+")";

Divv.style.color = f ; // 随机字体的颜色

n++; //每运行一次自动加1

var oldsize = parseInt(text[0].style.fontSize); //定义一个变量把文字的初始值大小保存下来
text[0].style.fontSize = oldsize + num +"px"; //对应的文字下标更改为字体对应的大小，
if(n%20==0){
num = num*(-1);
} // 当第20次变大的时候，然后缩小。所以取20余数为0的时候。num为-num。
},100)

}

</script>
<style>
div{
text-align: center;
background: black;
position: fixed;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
</style>
</head>
<body>
<div>
<p>变幻莫测</p>
</div>
</body>
</html>