這里分享下JS實現的九宮格抽獎案例，首先說明該版本抽獎過程中均為勻速轉動。
具體步驟和原理十分簡單，詳解代碼即可
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>抽獎</title> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } /* 代碼主體 */ body{ background: #2c9afc; } .lotteryBox{ width: 420px; height: 420px; border: 7px solid #99d4ff; margin: 50px auto; border-radius: 10px; padding: 20px; position: relative; } .lotteryBox ul{ width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; } .lotteryBox ul li{ width: 120px; height: 120px; border-radius: 5px; overflow: hidden; } .lotteryBox ul li img{ width: 100%; height: 100%; display: block; } #lotteryBtn{ cursor: pointer; opacity: 0.9; } #lotteryBtn:hover{ opacity: 1; } .active img{ opacity: 0.4; } #lotteryBtnStop{ opacity: 0.3; } /* 抽獎結果 */ #lotteryResult{ position: absolute; left: 10%; bottom: -67px; width: 80%; height: 60px; background-color: rgba(0,0,0,.5); text-align: center; color: white; line-height: 60px; } </style> </head> <body> <div class="lotteryBox"> <ul> <li class="item"><img src="images/01.jpg" alt=""></li> <li class="item"><img src="images/02.jpg" alt=""></li> <li class="item"><img src="images/03.jpg" alt=""></li> <li class="item"><img src="images/04.jpg" alt=""></li> <li id="lotteryBtn"><img src="images/cj.jpg" alt=""></li> <li class="item"><img src="images/05.jpg" alt=""></li> <li class="item"><img src="images/06.jpg" alt=""></li> <li class="item"><img src="images/07.jpg" alt=""></li> <li class="item"><img src="images/08.jpg" alt=""></li> </ul> <div id="lotteryResult">等待抽獎...</div> </div> <!-- 內部腳本代碼 --> <script> /* 九宮格位置 0 1 2 3 按鈕 4 5 6 7 */ var lotteryBtn = document.getElementById('lotteryBtn');//抽獎按鈕 var lotteryLi = document.getElementsByClassName('item');//獎品 var lotteryResult = document.getElementById('lotteryResult');//抽獎結果 var directionArray = [0,1,2,4,7,6,5,3];//獎品li標簽滾動的順序，即抽獎轉動方向 var lotteryIndex = 0;//lotteryIndex用來存放得到的隨機數，也就是抽中的獎品 var lotteryStatus = true;//定義一個抽獎開關 var timer = null;//定義時間標識符 //1、點擊抽獎按鈕 lotteryBtn.onclick = function(){ if(lotteryStatus){ //2、當抽獎開關為true的時候，可點擊抽獎 lotteryStatus = false;//抽獎開關設為false 處於抽獎中 即不能點擊抽獎 lotteryBtn.id = 'lotteryBtnStop';//更換抽獎按鈕狀態-禁止態 //3、定義重復性定時器，設置轉動效果和速度 timer = setInterval(function(){ lotteryLi[directionArray[lotteryIndex]].className = "item"; lotteryIndex++; //將物品連續在一起轉動 if (lotteryIndex >= 8) { lotteryIndex = 0; } lotteryLi[directionArray[lotteryIndex]].className = "item active" },100) //4、定義一次性延時定時器，設置轉動時間 setTimeout(function() { clearInterval(timer); // 6、添加暗操作，抽獎時阻止抽到最好的物品 if (lotteryIndex == 3) { lotteryLi[directionArray[lotteryIndex]].className = "item"; lotteryLi[directionArray[lotteryIndex+1]].className = "item active"; } lotteryStatus = true; document.getElementById('lotteryBtnStop').id = 'lotteryBtn'//更換抽獎按鈕狀態-激活態 //5、定義抽獎結束后的提示文本[0,1,2,4,7,6,5,3] if(lotteryIndex == 0){ lotteryResult.innerText = '感謝參與' }else if(lotteryIndex == 1){ lotteryResult.innerText = '恭喜你中了玫瑰' }else if(lotteryIndex == 2){ lotteryResult.innerText = '恭喜你中了盲盒' }else if(lotteryIndex == 3){ lotteryResult.innerText = '恭喜你中了一個小姐姐'/*'恭喜你中了手機'*/ }else if(lotteryIndex == 4){ lotteryResult.innerText = '恭喜你中了一個小姐姐' }else if(lotteryIndex == 5){ lotteryResult.innerText = '恭喜你中了耳機' }else if(lotteryIndex == 6){ lotteryResult.innerText = '恭喜你中了一個小哥哥' }else if(lotteryIndex == 7){ lotteryResult.innerText = '恭喜你中了積分' } }, Math.round(Math.random() * 3000) + 1000) }else{ console.log('無法點擊，正在抽獎中') } } </script> </body> </html>
.