一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看活动详情。
我正在参加 码上掘金体验活动，详情：show出你的创意代码块
将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言给个支持💕~~~~，谢谢大家⭐️⭐️⭐️~~~
实现一个随机生成的16进制颜色值，点击div元素切换颜色,和蹦迪似切换颜色两种方案
代码块
html部分
<div id="dv">第一种</div>
<div id="dv2">第二种</div>
封装一个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;
}
第一种点击div元素切换颜色实现
var btndv = document.getElementById('dv')
btndv.onclick = function () {
this.style.backgroundColor = getColor();
};
第二种点击蹦迪似切换颜色实现
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;
}
};
效果图如下：
这里只放了第一种的效果图,具体效果可以在代码块部分看哦
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
