慕缘小栈

一切从简

字体的随机颜色及有规律的大小变化

发表于

2025年7月11日

原文链接：http://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.getElementsByTagName("div")[0];
        var text = document.getElementsByTagName("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>

评论

发表回复取消回复