原生JS實現九宮格抽獎
阿新 • • 發佈:2020-09-15
本文例項為大家分享了JS實現九宮格抽獎的具體程式碼,供大家參考,具體內容如下
上程式碼:
<div class="wrapper"> <div>謝謝惠顧</div> <div>十萬元現金</div> <div>謝謝惠顧</div> <div>iphone11</div> <div>抽獎</div> <div>美的冰箱</div> <div>謝謝惠顧</div> <div>50元紅包</div> <div>謝謝惠顧</div> </div> <div class="result"></div>
CSS樣式程式碼:
<style> .wrapper { width: 300px; height: 300px; display: flex; flex-flow: row wrap; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 1px solid red; } .wrapper div { flex: none; width: 100px; height: 100px; box-sizing: border-box; border: 1px solid red; display: flex; align-items: center; justify-content: center; } .active { background-color: red; } .wrapper div:nth-child(5) { cursor: pointer; } .result { height: 100px; display: inline-block; position: absolute; top: 50px; left: 0; right: 0; margin: auto; text-align: center; line-height: 100px; font-size: 40px; font-weight: 700; color: #ff4400; } </style>
JS程式碼:
<script> var t,m,num,time,index,target,current; //以索引值為0,1,2,5,8,7,6,3的div元素為迴圈目標, //因為以num總數遞減的方式進行迴圈,故將陣列倒序定義 var arr = [3,6,7,8,5,2,1,0]; var div = document.querySelectorAll('.wrapper div'); var result = document.querySelector('.result'); div[4].onclick = function() { clearInterval(time); div[4].innerHTML = '抽獎中...'; result.innerHTML = ''; //中獎目標設為0到7的隨機整數 target = Math.floor(Math.random() * 8); //起始位置設為隨機,且以num為總的迴圈數 num = Math.floor(Math.random() * 8) + 40; //將總迴圈數的2/3儲存,方便調整速率峰值出現的時間 //若m為總迴圈的1/2,則速度峰值會在總時長的中間出現 m = Math.floor(num * 2 / 3); //此處if語句可限制中獎,從第一個開始外圈順時針分別對應7,6,5,4,3,2,1,0 //如設定target == 6 即限制中十萬元現金,以下程式碼為100%不中獎 if (target == 6|| target == 4 || target == 2 || target == 0) { target++; } speed(); function speed() { //將迴圈目標div的索引值轉換為迴圈總數的表示式 index = arr[num % 8]; //給當前迴圈元素新增樣式,並移除之前的樣式 if (current) { current.remove('active'); } div[index].classList.add('active'); current = div[index].classList; //速度函式,可除錯速率 t = Math.floor(Math.pow((num - m),2) + 250); //一次性定時器,巢狀遞迴迴圈控制速度 time = setTimeout(function() { speed() },t) //判斷中獎結果 if (num == target) { clearTimeout(time); div[4].innerHTML = '抽獎'; switch (target) { case 6: result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML + '大獎'; break; case 4: result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML; break; case 2: result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML; break; case 0: result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML; break; default: result.innerHTML = div[arr[target % 8]].innerHTML; } } num--; } } </script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。