实现字体大小变化与颜色随机变化_前端rgb255颜色随机-优快云博客

本文介绍了一个使用JavaScript实现的定时器功能，该定时器每秒会改变网页中div元素内的文本颜色和字体大小。文本颜色随机变化，字体大小在默认大小基础上先增大后减小，形成有趣的视觉效果。

写一个定时器，每一秒修改一次div内文本颜色和文字大小，最开始这个文字是默认大小，大小开始增大，当增大六次以后，文字大小开始缩小，缩小6次，文字再开始增大
html部分
在这里插入图片描述
js部分

/*
           颜色随机
           rgba(255,255,255,0);
           parseInt(Math.random()*255)
           */
          function randomColor(){
              var str = "rgb(" + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + ",1)";
              return str;
          };
          var oDiv = document.getElementById("div1");
          var speed = 5;//每一次变化的大小
          var count = 0;//计数
          setInterval(function(){
              oDiv.style.color = randomColor();

              //1.将字体上一次的字体大小取出
              var iCur = parseInt(getStyle(oDiv,"fontSize"));
              //2.变化字体大小，重新赋值回去
              oDiv.style.fontSize = iCur + speed + "px";

              count++;
              if(count % 6 == 0){
                  speed *=-1;
              }
          },1000);
          /*
获取当前有效的样式
.currentStyle[属性] --IE兼容
getComputedStyle()[属性]--火狐、谷歌
*/
//跨浏览器的兼容
function getStyle(node,cssStle){
    return node.currentStyle ? node.currentStyle[cssStle]:getComputedStyle(node)[cssStle];
}