本人爲初學者，寫的不好的請不要見怪
目的是用節簡的代碼來實現抽獎效果
下圖爲基本的佈局
通過點擊GO按鈕可以實現滾動，可連續點擊。
以下爲代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#dalor{
width: 400px;
height: 400px;
position: absolute;
margin-top: -200px;
margin-left: -200px;
top: 50%;
left: 50%;
}
#dalor div{
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
#dalor_go{
position: absolute;
width: 200px;
height: 200px;
top: 100px;
left: 100px;
line-height: 200px;
background: red;
color: white;
text-align: center;
border: none;
cursor: pointer;
}
.dalor1{
top: 0;
left: 0;
background: #FF9999;
}
.dalor2{
top: 0;
left: 100px;
background: #CDCD66;
}
.dalor3{
top: 0;
left: 200px;
background: #FF9999;
}
.dalor4{
top: 0;
left: 300px;
background: #CDCD66;
}
.dalor5{
top: 100px;
left: 300px;
background: #FF9999;
}
.dalor6{
top: 200px;
left: 300px;
background: #CDCD66;
}
.dalor7{
top: 300px;
left: 300px;
background: #FF9999;
}
.dalor8{
top: 300px;
left: 200px;
background: #CDCD66;
}
.dalor9{
top: 300px;
left: 100px;
background: #FF9999;
}
.dalor10{
top: 300px;
left: 0;
background: #CDCD66;
}
.dalor11{
top: 200px;
left: 0;
background: #FF9999;
}
.dalor12{
top: 100px;
left: 0;
background: #CDCD66;
}
.blue{
background: #40FFE5;
}
</style>
</head>
<body>
<div id="dalor">
<input id="dalor_go" type="button" value="go!">
<div class="dalor1 blue">1</div>
<div class="dalor2">2</div>
<div class="dalor3">3</div>
<div class="dalor4">4</div>
<div class="dalor5">5</div>
<div class="dalor6">6</div>
<div class="dalor7">7</div>s
<div class="dalor8">8</div>
<div class="dalor9">9</div>
<div class="dalor10">10</div>
<div class="dalor11">11</div>
<div class="dalor12">12</div>
</div>
<script>
window.οnlοad=function () {
var odar=document.getElementById("dalor").getElementsByTagName("div");
var odarGo=document.getElementById("dalor_go");
var suzi=0;
odarGo.addEventListener("click",function () {
var odartime=Math.ceil(Math.random()*24+24);
var xunuantimu=setInterval(function () {
odar[suzi%12].classList.remove("blue");
odar[(++suzi)%12].classList.add("blue");
if (suzi%odartime==0){
clearInterval(xunuantimu);
}
},100);
});
}
</script>
</body>
</html>主要通過suzi來判斷整體的運作，通過求餘數來實現停止，增加來實現滾動的效果。
