抽獎機 · vue

``` <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: 30px; font-weight: bold; } #start{ cursor: pointer; background-color: pink; } </style> </head> <body> <div id="fa"> <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> <script> // 邏輯：1.點擊開始，觸發一個定時器 // 2.定時器內部，隨機一個數，通過這個數來獲取獎品所在的元素 // 3.必須設置一個時間點，停止定時器 let but = document.getElementById('start'); let options = document.getElementsByClassName('option'); let timer = null; but.onclick = function(){ // 設置一個初始值作為時間判斷 let num = 0; // 1.觸發一個定時器 if(timer==null){ timer = setInterval(()=>{ num++; // 2.隨機 0-7的數，通過數組下標獲取具體選中的元素 let ran = Math.round(Math.random()*(7-0)+0); // 3.1 把所有的元素都恢復原來樣式 for(let i=0;i<options.length;i++){ options[i].style.backgroundColor = '#fff'; } // 3.2 給選中元素添加樣式（背景顏色） options[ran].style.backgroundColor = 'orange'; // 4.給定時器設置有效時間，停止定時器 if(num>=50){ // 50代表的是業務要求 clearInterval(timer); timer = null; } },100); } } </script> ``` 效果圖： ![](https://img.kancloud.cn/7a/52/7a52fede8acf1c5a94069e7eead76c64_721x627.png)