<body>

? ? <div id="fa">
? ? ? ? <div class="option">1</div>
? ? ? ? <div class="option">5</div>
? ? ? ? <div class="option">3</div>
? ? ? ? <div class="option">4</div>
? ? ? ? <div id="start">開始抽獎(jiǎng)</div>
? ? ? ? <div class="option">5</div>
? ? ? ? <div class="option">6</div>
? ? ? ? <div class="option">7</div>
? ? ? ? <div class="option">8</div>
? ? </div>
</body>

樣式

<style>
? ? ? ? #fa {
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? height: 600px;
? ? ? ? ? ? border: 1px solid red;

? ? ? ? }

? ? ? ? #fa>div {
? ? ? ? ? ? width: 33%;
? ? ? ? ? ? height: 33%;
? ? ? ? ? ? border: 1px solid red;
? ? ? ? ? ? float: left;
? ? ? ? ? ? line-height: 200px;
? ? ? ? ? ? text-align: center;//文本居中
? ? ? ? ? ? font-size: 40px;
? ? ? ? ? ? font-weight: 800;//加粗字體

? ? ? ? }

? ? ? ? #start {
? ? ? ? ? ? cursor: pointer;//使鼠標(biāo)移入時(shí)出現(xiàn)小手圖標(biāo)
? ? ? ? ? ? background-color: pink;
? ? ? ? }
</style>

JS實(shí)現(xiàn)抽獎(jiǎng)

邏輯分析：

1.點(diǎn)擊中間的開始抽獎(jiǎng)時(shí)觸發(fā)一個(gè)定時(shí)器
2.觸發(fā)定時(shí)器后，隨機(jī)生成一個(gè)數(shù)字，通過這個(gè)數(shù)字來獲取當(dāng)前所在元素
3.設(shè)置一個(gè)時(shí)間來結(jié)束定時(shí)器，結(jié)束抽獎(jiǎng)

<script>
? ? ??? ?let btn = document.getElementById('start');//獲取到開始抽獎(jiǎng)按鈕
? ? ? ? let options = document.getElementsByClassName('option');//獲取到8個(gè)獎(jiǎng)區(qū)
? ? ? ? let timer =null;//防止定時(shí)器多次觸發(fā)，初始值設(shè)為null

?? ??? ?//為btn綁定一個(gè)單擊事件
? ? ? ? btn.onclick = function () {
? ? ? ? ? ? //設(shè)置一個(gè)初始值 作為時(shí)間判斷
? ? ? ? ? ? let num = 0;
? ? ? ? ? ??
? ? ? ? ? ? if (timer == null) {
? ? ? ? ? ? ? ? //觸發(fā)一個(gè)定時(shí)器
? ? ? ? ? ? ? ?timer = setInterval(function () {

? ? ? ? ? ? ? ? ? ? num++;

??? ??? ??? ??? ??? ?//隨機(jī)產(chǎn)生一個(gè)0 - 7 的數(shù)字 通過該數(shù)字作為數(shù)組的下標(biāo)來獲取到div
? ? ? ? ? ? ? ? ? ? let ran = Math.round(Math.random() * (7 - 0) + 0);
? ? ? ? ? ? ? ? ? ? //round是因?yàn)镸ath.random() * (7 - 0) + 0)取出的隨機(jī)數(shù)是含小數(shù)的一串?dāng)?shù)字，所以需要取整
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? //改變選中的元素背景顏色之前，將所有元素的背景顏色恢復(fù)
? ? ? ? ? ? ? ? ? ? for (let i = 0; i < options.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? options[i].style.backgroundColor = '';
? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? //給選中的元素設(shè)置一個(gè)背景顏色
? ? ? ? ? ? ? ? ? ? options[ran].style.backgroundColor = 'tomato';

? ? ? ? ? ? ? ? ? ? //給定時(shí)器一個(gè)時(shí)間，到時(shí)間停止定時(shí)器
? ? ? ? ? ? ? ? ? ? if(num == 5){
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(timer)
? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? }

? ? ? ? }
</script>

效果