效果如下：
圖（1） 初始圖
圖（2） 開始閃
代碼如下：
<!DOCTYPE html><html><head> <title>九宮格</title> <style type="text/css"> div{ width:190px; height:190px; background:#FFA600; float:left; margin:10px; border-radius: 10px; } body{ width:700px; margin:0 auto; } button{ clear:both; width:200px; height:50px; background:#FFF; border:none; border-radius:10px; position:relative; left:100px; } button:hover{ background:#FFA600; } </style></head><body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <button id="btnone">開始閃</button> <button id="btntwo">結束閃</button> <script type="text/javascript" > var div=document.getElementsByTagName('div');var colors=['red','plum','blue','green','cyan','black','pink','gray','brown'];btnone.onclick=function(){//點擊開始 c=setInterval(function(){//使用定時器 start();//調用函數 },1000)//設置時間}btntwo.onclick=function(){//停止按鈕的 for(i=0;i<div.length;i++){//循環 div[i].style.background="#FFA600";//遍歷清除顏色 } clearInterval(c);//停止定時器}function start(){ for(var i=0;i<div.length;i++){//每次隨機顏色時遍歷將背景設置好 div[i].style.background="#FFA600"; } var arr=new Array(3);//創建數組容納隨機數 var arr1=new Array(3); for(var i=0;i<arr.length;i++){//創建第一組數組 var a=parseInt(Math.random()*9); console.log(a); if(i==0){//第一個數字直接導入數組 arr[i]=a; }else{ for(var j=0;j<i;j++){//第二個與第三個數字進行判斷 if(a==arr[j]){//如果重復從新開始 i-- }else{ arr[i]=a; } } } } for(var i=0;i<arr1.length;i++){//同上。隨機顏色 var a=parseInt(Math.random()*9); if(i==0){ arr1[i]=a; }else{ for(var j=0;j<i;j++){ if(a==arr1[j]){ i-- }else{ arr1[i]=a; } } } } for(var i=0;i<arr.length;i++){ div[arr[i]].style.background=colors[arr1[i]];//將隨機的顏色給隨機的地址 }} </script></body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
