一秒修改一次div内文本颜色和文字大小，当增大了6次以后, 文字大小开始缩小,缩小6次,文字再开始增大。

最新推荐文章于 2021-06-08 22:52:56 发布

OrdnAry

最新推荐文章于 2021-06-08 22:52:56 发布

阅读量483

点赞数

分类专栏：学习文章标签： html css js

本文链接：https://blog.csdn.net/OrdnAry/article/details/108075076

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{width:300px;height: 200px;border:1px solid black;margin:200px auto;font-size: 18px;;text-align: center;line-height: 200px;}
    </style>
    <script>
        /* 
                写一个定时器,每个一秒修改一次div内文本颜色和文字大小.
                最开始这个文字是默认大小,大小开始增大,当增大了6次以后,
                    文字大小开始缩小,缩小6次,文字再开始增大。
            */
        function getStyle(node, cssStyle){ //取出内部样式中的style 考虑浏览器的兼容
             return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
        }
        window.onload =function (){
            var i =3; //每秒钟增大的字码
            var count = 0; //记录次数
            var oDiv = document.getElementById("a"); //取出div
            var font = parseInt(getStyle(oDiv,'fontSize'));  //取出样式
            setInterval( function (){
                //颜色改变
                oDiv.style.color = "rgb(" + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + ")"; //随机颜色

                oDiv.style.fontSize = font + i + "px";   //每一秒加3
                font+=i;//把加过之后的字体大小加上去
                count++; //次数加1

                 if(count%6 == 0){ //每加了6次就取反
                    i*=-1;
                 }        
            },1000)
        }
    </script>
</head>
<body>
    <div id="a">啊啊啊</div>
</body>
</html>

在这里插入图片描述

OrdnAry

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一秒修改一次div内文本颜色和文字大小，当增大了6次以后, 文字大小开始缩小,缩小6次,文字再开始增大。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #a{width:300px;he
复制链接

扫一扫