案例介紹 歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！我們來用JavaScript編程實戰案例，做一個大轉盤。當你難以抉擇的時候不妨用這個案例來幫你做選擇。通過編程實戰我們可以學到按鈕的點擊事件onclick()以及定時器的使用. 案例演示 每個選擇都展示在不同的盒子里，通過點擊中間的 ...
案例介紹
歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個大轉盤。當你難以抉擇的時候不妨用這個案例來幫你做選擇。通過編程實戰我們可以學到按鈕的點擊事件onclick()以及定時器的使用.
案例演示
每個選擇都展示在不同的盒子里，通過點擊中間的開始選擇按鈕，系統就會在5s內自動為您做出選擇。
源碼學習
進入核心代碼學習，我們先來看HTML中的核心代碼。
<!-- 有個小院-興趣編程 -->
<div class=big>
<div class="option">大盤雞</div>
<div class="option">麻辣香鍋</div>
<div class="option">酸辣粉</div>
<div class="option">蘭州拉麵</div>
<div id="start">開始選擇</div>
<div class="option">疙瘩湯</div>
<div class="option">魚香肉絲</div>
<div class="option">麻辣燙</div>
<div class="option">鹹菜</div>
</div>
然後再讓我們來看CSS核心代碼，CSS代碼主要是對盒子的大小等進行佈局。
.big{
width: 600px;
height: 600px;
border: 1px solid red;
}
.big>div{
width:33%;
height: 33%;
border: 1px solid red;
float: left;
line-height: 200px;
text-align: center;
font-size: 30px;
font-weight: bold;
}
#start{
cursor: pointer;
background-color: rgb(160, 110, 119);
}
接下來進行核心的JavaScript代碼編寫，首先根據id和className獲取對象。通過onclick設置中間按鈕的點擊事件，觸發一個定時器setInterval()。然後通過random獲取0-7的隨機數作為索引，並據此將其索引對應的盒子設為選中的目標，設置選中的背景顏色。利用for迴圈取消之前盒子的選定，設置時間點timer用於停止定時器。
//有個小院-興趣編程
let but=document.getElementById("start");
let options=document.getElementsByClassName("option");
let timer=null;
but.onclick=function(){
let num=0;
if(timer==null){
timer=setInterval(()=>{
num++;
let ran= Math.round(Math.random()*(7-0)+0);
for(let i=0;i<options.length;i++){
options[i].style.backgroundColor='white';
}
options[ran].style.backgroundColor='orange';
if(num>=50){
clearInterval(timer);
timer=null;
}
},100);
}
}
你覺得大轉盤還能用在什麼地方？
全網可搜：小院里的霍大俠， 免費獲取簡單易懂的實戰編程案例。編程/就業/副業/創業/資源。
私微信：huodaxia_xfeater
二維碼： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公眾號：有個小院（微信公眾號：yougexiaoyuan）
github：yougexiaoyuan (視頻源碼免費獲取)
（部分素材來源於互聯網，如有保護請聯繫作者）
