实现字体大小变化与颜色随机变化

写一个定时器,每一秒修改一次div内文本颜色和文字大小,最开始这个文字是默认大小,大小开始增大,当增大六次以后, 文字大小开始缩小,缩小6次,文字再开始增大
html部分
实现字体大小变化与颜色随机变化_第1张图片
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];
}

效果
实现字体大小变化与颜色随机变化_第2张图片

你可能感兴趣的:(实现字体大小变化与颜色随机变化)