js改变文本字体大小及颜色，先放大后缩小，10次循环

最新推荐文章于 2024-07-11 10:57:30 发布

a_li_li

最新推荐文章于 2024-07-11 10:57:30 发布

阅读量4.4k

点赞数

文章标签：前端 js改变字体大小颜色的循环

本文链接：https://blog.csdn.net/a_li_li/article/details/69666262

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>文字变化</title>
   <script type="text/javascript">
       onload = function(){
           var oBox = document.getElementsByTagName('div')[0];
           var num = 0;//计数
           var size = 1;//控制字体改变大小
           var temp = null;
           oBox.style.fontSize = '20px';
           temp = setInterval(function(){
               //随机颜色
               var num1 = parseInt(Math.random()*256);
               var num2 = parseInt(Math.random()*256);
               var num3 = parseInt(Math.random()*256);
               var rgb = 'rgb' + '(' + num1 + ',' + num2 + ',' + num3 + ')';
               oBox.style.color = rgb;
               //改变字体大小
               oBox.style.fontSize = parseInt(oBox.style.fontSize) + size + 'px';
               num++;
               //变化10次后又变小循环变化
               if( num%10 == 0 ){
                   size = size * (-1);
               }
           },1000)
       }
   </script>
</head>
<body>
   <div>变化变化变化</div>
</body>
</html>