随机生成颜色切换

将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~\
如果大家喜欢，可以点赞或留言给个支持💕 ~~，谢谢大家⭐️⭐️⭐️~

实现一个随机生成的16进制颜色值，点击div元素切换颜色,和蹦迪似切换颜色两种方案

html部分

<div id="dv">第一种</div>
<div id="dv2">第二种</div>

        

          
        
        
        

          

          AI 代码解读
        
      
      

封装一个getColor函数

//生成随机颜函数
function getColor() {
      var str = "#";
      var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
      for (var i = 0; i < 6; i++) {
        var num = parseInt(Math.random() * 16);
        str += arr[num];
      }
      return str;
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

第一种点击div元素切换颜色实现

var btndv = document.getElementById('dv')
btndv.onclick = function () {
  this.style.backgroundColor = getColor();
};

        

          
        
        
        

          

          AI 代码解读
        
      
      

第二种点击蹦迪似切换颜色实现

var btndv2 = document.getElementById('dv2')
var jump=0;
var aa;
btndv2.onclick = function () {
  if(jump == '0'){
    aa = setInterval(()=>{
      this.style.backgroundColor = getColor();
    },50)
    jump=1;
  }else if(jump == '1'){
    clearInterval(aa);
    jump=0;
  }
};

        

          
        
        
        

          

          AI 代码解读
        
      
      

效果图如下：

这里只放了第一种的效果图,具体效果可以在代码块部分看哦