abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sss</title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sss</title>
<style>
*{margin:0;padding: 0}
.bigbox{margin:200px auto; height: 600px;width: 600px;}
.bigbox div{width: 200px;height: 200px;color: white;float: left;text-align: center;line-height: 200px;font-size: 30px;}
#div1{background: rgba(20,20,100,0.9);}
#div2{background: rgba(20,188,20,0.9);}
#div3{background: rgba(50,100,20,0.9);}
#div4{background: rgba(188,188,20,0.8);}
#div5{background: rgba(188,20,188,0.8);}
#div6{background: rgba(20,188,188,0.8);}
#div7{background: rgba(255,150,10,0.8);}
#div8{background: rgba(150,10,255,0.8);}
#btn{width: 200px;height: 200px;line-height: 200px;border:none;display: block;font-size: 30px;color: white;background: blue;}
#btn:hover{cursor:pointer;}
</style>
</head>
<body>
<div class="bigbox">
<div id="div1">加油</div>
<div id="div2">冰箱</div>
<div id="div3">加油</div>
<div id="div8">牛奶</div>
<div id="div9">
<button type="button" id="btn">點擊抽獎
</button>
</div>
<div id="div4">洗衣機</div>
<div id="div7">加油</div>
<div id="div6">加油</div>
<div id="div5">油煙機</div>
</div>
</body>
<script>
var flag = 0;
var btn, usedColor, usedElem, intv;
var iCount=1;
var j=1;
btn = document.getElementById("btn");
btn.onclick = function(){
if(flag==0){
flag = 1;
btn.innerText = "單擊停止";
usedColor = document.getElementById("div1").style.background;
usedElem = document.getElementById("div1");
document.getElementById("div1").style.background = "rgba(100,100,20,0.5)";
intv = window.setInterval("goodluck()",50);
}else{
flag = 0;
btn.innerText = "單擊抽獎";
window.clearInterval(intv);
usedElem.style.background = "red";
var temp = window.setInterval("getResult()",250);
}
}
function goodluck(){
usedElem.style.background = usedColor;
i = iCount%8+1;
// j = (iCount-1)%8+1;
var str = "div"+i;
var usingBlock = document.getElementById(str);
usedElem = usingBlock;
usedColor = usingBlock.style.background;
usingBlock.style.background = "rgba(100,100,20,0.5)";
iCount++;
}
function getResult(){
if(j%2==1)
{usedElem.style.background = "rgba(255,0,0,0.4)"}
else
{usedElem.style.background = "red"};
j++;
}
</script>
</html>效果圖
思路：
1、通過按鈕點擊事件，改變按鈕文字內(nèi)容（單擊抽獎與單擊停止間切換）
2、通過setInterval循環(huán)goodluck()函數(shù)，通過全局變量iCount的自增及求余運算，移動當前元素“指針”；
3、在循環(huán)內(nèi)還原上一個元素的顏色，把當前元素的對象名和顏色另存一份到相應(yīng)的全局變量中，并把當前元素的顏色設(shè)為半透明的紅色；
4、按停止按鈕時，用clearInterval（）清除循環(huán)，并建一個新的循環(huán)，用來閃爍抽中的區(qū)塊。
問題：
沒想好點擊停止按鈕時，怎樣讓所有的樣式恢復原狀，有時間再考慮。
Correcting teacher：天蓬老師Correction time：2019-04-12 09:16:12
Teacher's summary：你的抽獎代碼很有意思嗎? 其中的原理并不難, 但是可以做很多有用的事情