練習要求：
在html頁面中做出3*3九個格子，隨機抽取其中三個并賦予隨機三種不同的背景色。
九宮格下有兩個按鈕，第一個按鈕點擊后開始隨機，自動隨機抓取三個格子并賦予隨機三種顏色。第二個按鈕點擊后停止隨機。
編碼過程：
首先按照要求制作九宮格頁面布局，利用CSS進行精準布局，這個練習項目的重點是javascript隨機算法，布局為次，所以很快用<div> <li> 標簽完成布局，如圖1.1
CSS代碼如下
*{
margin: 0;
padding: 0;
}
li {
margin: 2px;
display: block;
width: 30px;
height: 30px;
border-radius: 7px;
position: relative;
border: 1px solid black;
}
div {
float: left;
margin: 1px;
padding: 0;
}
ul {
margin: 0px;
padding: 0;
}
button {
position: relative;
top: 120px;
left: -100px;
}
input {
position: relative;
top: 110px;
left: -100px;
}
構建編程邏輯
首先是如何獲得隨機顏色 ?在html中顏色可以使用三種方法表示： 直接使用顏色名稱 如“red” "black"?
使用RGB（255，255，255）表示 ， 使用十六進制顏色表示 如：#ffffff
本次練習就用十六進制顏色。
首先 Math.random() 函數可以得到一個0~1之間的一個隨機數，但是它是一個浮點數，也就是可能得到0.8778這種有小數的數字。使用Math.floor可以得到一個最接近浮點數的整數，用上面兩種函數可以得到隨機整數
Math.floor(Math.random())
用得到的隨機整數乘以0xffffff得到十六進制數字，使用toString(16)轉為十六進制字符串
所以得到隨機十六進制的顏色的代碼為
?Math.floor(Math.random()*0xffffff).toString(16)；賦值給變量col
var col = Math.floor(Math.random()*0xffffff).toString(16)；
因為九宮格的默認顏色是白色，所以要防止隨機顏色為白色(#ffffff)，使用if語句可以做到
if ? (col != #ffffff） ?{
return col } else{
bg1() ? //重新隨機
}
其中 bg1()函數就是產生隨機顏色的函數名
function bg1() {
var col ='#'+Math.floor(Math.random()*0xffffff).toString(16);
if (col == "#ffffff") {
bg1();
}
else {
return col
}
};
然后需要在九個塊中隨機抽取三個不同的塊，改變他們的背景色為隨機色，使用setTimeout()函數進行遞歸，實現自動抽取，直到手動暫停。
HTML中<body>標簽內容如下
給九個li標簽賦予不同的ID屬性“1”~“8”，這樣就可以使用隨機函數抓取不同ID屬性的li標簽
var mub1 = Math.floor(Math.random()*9); ? ?
var mub2 = Math.floor(Math.random()*9);
var mub3 = Math.floor(Math.random()*9); ? ?
生成三個隨機范圍在0~9之間的隨機變量 mub1, mub2 ,mub3
必須要保證這三個隨機函數不相等，這樣才能抓取三個隨機的塊
使用if,else語句過遞歸過濾不滿足條件的隨機數，然后再使生成的mub1,2,3作為ID值，各賦予之前完成的隨機顏色函數，把之前得到隨機數代碼一起封裝為函數 gc();
document.getElementById("sta").onclick = function gc(){
var mub1 = Math.floor(Math.random()*9);
var mub2 = Math.floor(Math.random()*9);
var mub3 = Math.floor(Math.random()*9);
if (mub1 != mub2&&mub2 !=mub3&&mub1 !=mub3) {
document.getElementById(mub1).style.backgroundColor = bg1();
document.getElementById(mub2).style.backgroundColor = bg1();
document.getElementById(mub3).style.backgroundColor = bg1();
}
else{
gc();
}
這樣的函數是不完整的，這樣點擊開始按鈕只執行一次抓取與上色，需要使用setTimeout()設置時間間隔進行遞歸，達到自動抓取與上色的目的sto = setTimeout(function(){gc()},1001)
sto = setTimeout(function(){gc()},1001);
cle = setTimeout(function(){cm()},1000);
設置時間間隔循環函數語法為：setTimeout(code,millisec) ， code為必填項，為要執行的javascript代碼，millisec必填項，單位為毫秒，指在多少毫秒后執行code語句。
不能直接設置setTimeout（gc(),1000）,這樣設置會導致瀏覽器報錯gc()函數未定義defind
因為setTimeout函數作用域是window.而 gc()函數不是全局函數，所以找不到gc()函數，所以要
這樣設置： setTimeout(funtion(){gc()},1000);
同時每次抓取三個塊上色完成后，在第二次抓取之前，需要將之前的顏色清除為白色，所以需要一個設置所有li標簽背景色為白色的函數cm();
function cm() {
var li = document.getElementsByTagName("li") ? ? //抓取所有“li"標簽，賦值數組li
var i = 0 ;
for (var i = 0; i < li.length; i++) { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//歷遍所有li標簽，改變backgroundColor
li[i].style.backgroundColor = "#ffffff"
};
};
為STOP按鈕設置清除setTimeout函數clearTimeout()
document.getElementById("stop").onclick =function stopMot() {
clearTimeout(sto);
clearTimeout(cle);};
}
以上，基本已經完成了要求效果。
