javascript - 做一个随机出现颜色的九宫格，如何清除setInterval出现的随机颜色，又不影响下一次执行呢
本文介绍了javascript - 做一个随机出现颜色的九宫格，如何清除setInterval出现的随机颜色，又不影响下一次执行呢的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
这是演示地址：http://vvhl.me/project/test2/index.html
我想做一个九宫格，随机出现格子，随机出现红绿蓝三种颜色。但是我现在遇到了一个难题，这些颜色随机出现之后并不会消失，同个位置出现第二种颜色的时候直接覆盖上去了，请问大家知道怎样让出现后的颜色在下一个颜色出现的时候就消失吗？我试了很多种方法，但是都不成功，不知道问题出在哪里。。下面是Js部分
$(function(){
function radom(){
var arr = document.getElementsByTagName("li"); //获得一个数组
var l = arr.length; //获取到li的全部个数
function radomNum(arr){
return arr[Math.floor(Math.random() * l)];
}
var radomList = radomNum(arr); //返回的随机的Li元素
var c = ["red","green","blue"];
var cl = c.length;
function color(c){
return c[Math.floor(Math.random() * cl)];
}
var radomColor = color(c); //返回的随机颜色
radomList.style.background = radomColor;
}
setInterval(function(){ //创建一个定时器
radom();
},1000)
})
HTML部分：
<body>
<div id="Box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义
解决方案
再換顏色前遍歷清空所有顏色就可以了
var arr = document.getElementsByTagName("li"); //获得一个数组
// 把所有格子顏色換成白色
for(var i = 0, len = arr.length ; i < len ; i++) {
arr[i].style.background = "#fff"
}
演示
这篇关于javascript - 做一个随机出现颜色的九宫格，如何清除setInterval出现的随机颜色，又不影响下一次执行呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
