效果如下：

图(1) 初始图

图(2) 开始闪

代码如下：

！DOCTYPE htmlhtmlhead标题九宫格/title style type=' text/CSS ' div { width :190 px；高度：190 px背景# FFA 600 float : leftmargin 336010 pxborder-半径： 10px}机身{ width :700 pxmargin :0 auto }按钮{ clear:both宽度宽度：200像素高度：50 px背景： # FFF；border : none border-radius :10 px；位置：相对；left:100px} button :悬停{ background : # FFA 600}/style/head dy div/div/div/div/div/div/div/div/div/div按钮id=' btnone '开始闪/button button id='btntwo '结束闪/按钮脚本类型=' text/JavaScript ' var div=document。getelementsbytagname(' div ')；var colors=['红','梅','蓝','绿','青','黑','粉','灰','棕'];btnone.onclick=function(){//点击开始c=setInterval(函数(){//使用定时器start()；//调用函数},1000)//设置时间}btntwo.onclick=function(){//停止按钮的for(I=0；idiv.lengthi ){//循环div[I]。风格。背景=' # FFA 600//遍历清除颜色} clearInterval(c)；//停止定时器}函数start(){ for(var I=0；idiv.lengthi ){//每次随机颜色时遍历将背景设置好div[I]。风格。背景=' # FFA 600} var arr=新数组(3);//创建数组容纳随机数var arr1=新数组(3);for(var I=0；长度；i ){//创建第一组数组var a=parsent(数学。random()* 9)；控制台。日志(a)；if(i==0){//第一个数字直接导入数组arr[I]=a；} else { for(var j=0；冀；j ){//第二个与第三个数字进行判断if(a==arr[j]){//如果重复从新开始I-} else { arr[I]=a；} } } } for(var I=0；IAR 1。长度；i ){//同上。随机颜色var a=parsent(数学。random()* 9)；if(I==0){ arr 1[I]=a；} else { for(var j=0；冀；j){ if(a==arr 1[j]){ I-} else { arr 1[I]=a；} } } } for(var I=0；长度；I){ div[arr[I]]风格。背景=颜色[arr 1[I]]；//将随机的颜色给随机的地址} }/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！