1.九宮格閃動效果
開始顏色閃動
1.首先清除之前的閃動效果，及將所有顏色恢復
2.取出相應要閃動的節點，並設定顏色
這裡要用到setInterval()函式
因為該函式會不停的呼叫，所以在裡面放一個begin值，點選 開始跟結束 來控制這個值，這個值為true時才執行，
不能用while（），這樣會崩潰。（事件一直在執行，無法執行其他）
setAttribute只能對html的屬性進行設定，
lightbox.setAttribute("background-color",getRandomColor());
而要改變css樣式，如果不用jQuery，就要這麼寫
lightbox.style.backgroundColor=getRandomColor();
setTimeout("function",time) 設定一個超時物件
setInterval("function",time) 設定一個超時物件
SetInterval為自動重複，setTimeout不會重複。
clearTimeout(物件) 清除已設定的setTimeout物件
clearInterval(物件) 清除已設定的setInterval物件
clearInterval() 方法的引數必須是由 setInterval() 返回的 ID 值。
語法 ：
clearInterval(id_of_setinterval)
收集一個函式：獲取隨機顏色值;
function getRandomColor(){
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
}
說明：
1、16777215為16進位制的顏色ffffff轉成10進位制的數字
2、>>數字取整
3、轉成16進位制不足6位的以0來補充
最後貼出程式碼：
index.html
1.css<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="1.css"> <script type="text/javascript" src="1.js"></script> </head> <body> <div id="container"> <div id="header"></div> <div id="box1"> <div id="block1" class="box"> </div> <div id="block2" class="box"> </div> <div id="block3" class="box"> </div> <div id="block4" class="box"> </div> <div id="block5" class="box"> </div> <div id="block6" class="box"> </div> <div id="block7" class="box"> </div> <div id="block8" class="box"> </div> <div id="block9" class="box"> </div> <div id="bl" onclick="startColor()">開始閃</div> <div id="sl" onclick="stopColor()">停止閃</div> </div> <div id="footer"></div> </div> </body> </html>
#box1{
padding-left: 120px;/* 下面盒子到外面盒子的左間距 */
padding-top:50px;/* 上間距 */
width:400px;
height:550px;
border:2px solid;
border-color: blue;
text-align:center;
margin:0 auto;
}
.box{
float:left;
background-color: orange;
border-radius: 2px;
height:95px;
width:95px;
margin-left: 2px;
border:2px solid;
border-color: red;
}
#bl{
float:left;
width:300px;
height:100px;
border:2px solid;
border-color: red;
}
#sl{
float:left;
width:300px;
height:100px;
border:2px solid;
border-color: red;
}
1.js:
var begin;
var id;
function stayColor(){
for(var i = 1;i<10;i++){
var numbox ="block"+i;
var staybox = document.getElementById(numbox);
staybox.style.backgroundColor="#FFA500";
}
}
function stopColor(){
begin=false;
clearInterval(id);
for(var i = 1;i<10;i++){
var numbox ="block"+i;
var staybox = document.getElementById(numbox);
staybox.style.backgroundColor="#FFA500";
}
}
function startColor(){
begin = true;
/*防止多次點選造成多次效果，故將之前的效果清楚（如果有）*/
clearInterval(id);
id=setInterval(function(){
if(begin){
stayColor();
var numbox ="block"+Math.ceil(Math.random()*9);
var numbox1 = "block"+Math.ceil(Math.random()*9);
var numbox2 = "block"+Math.ceil(Math.random()*9);
while(numbox==numbox1){
numbox1 = "block"+Math.ceil(Math.random()*9);
}
while(numbox==numbox2||numbox1==numbox2){
numbox2 = "block"+Math.ceil(Math.random()*9);
}
var lightbox = document.getElementById(numbox);
var lightbox1 = document.getElementById(numbox1);
var lightbox2 = document.getElementById(numbox2);
/*這些只能設定在html中，css中無法改變
lightbox.setAttribute("background-color",getRandomColor());
alert(lightbox.getAttribute("background-color"));*/
lightbox.style.backgroundColor=getRandomColor();
lightbox1.style.backgroundColor=getRandomColor();
lightbox2.style.backgroundColor=getRandomColor();
}
else{
return;
}
},1000);
}
function getRandomColor(){
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
}
/* 1、16777215為16進位制的顏色ffffff轉成10進位制的數字
2、>>數字取整
3、轉成16進位制不足6位的以0來補充 */