JavaScript练习 设置字体初始值大小和颜色为默认值，每秒钟字体增大5个像素，颜色变换一次 ，增大6次后开始缩小，缩小6次后再次增大 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            margin: 0 auto;
            font-size: 18px;
            line-height: 100px;
            text-align: center;
        }
    </style>
    <script src="./js/tool.js"></script>
    <script>
        /*
            设置字体初始值大小和颜色为默认值，每秒钟字体增大5个像素，颜色变换一次
            增大6次后开始缩小，缩小6次后再次增大
        */
        window.onload = function () {
            // 获取元素
            var div1 = document.getElementById('div1');
            // 字体每次增大的像素
            var speed = 5;
            // 计数
            var count = 0;
            setInterval(() => {
                // 每秒钟颜色随机变换一次
                var rgba = 'rgba(' + parseInt(Math.random() * 266) + ',' + parseInt(Math.random() * 266) + ',' + parseInt(Math.random() * 266) + ',1)';
                // 获取div的字体大小
                var fontSize = parseInt(getStyle(div1, 'fontSize'));
                // 将随机的颜色设置给字体颜色
                div1.style.color = rgba;
                // 将字体大小加5像素以后设置回去
                div1.style.fontSize = (fontSize + speed) + 'px';
                // 计数加1
                count++;
                // 每6次以后开始改变增大或减少
                if (count % 6 == 0) {
                    speed *= -1;
                }
            }, 1000);
        }

        /**
         * @todo 获取原始样式 兼容 ie
         * @param {*} node  元素
         * @param {*} strStyle  样式名称
         */
        function getStyle(node, strStyle) {
            return node.currentStyle ? node.currentStyle[strStyle] : getComputedStyle(node)[strStyle];
        }
    </script>
</head>

<body>
    <div id="div1">
        测试文字
    </div>
</body>

</html>

 

posted @ 2021-02-20 13:54  独孤靖云  阅读(254)  评论(0)    收藏  举报