js實現隨機抽獎
阿新 • • 發佈:2020-03-23
前言
在前端的開發當中,我們肯定會遇到隨機抽獎的需求。我們要怎麼去實現呢?下面就來分享隨機抽獎的JS程式碼,有需要的小夥伴可以複製到編譯器當中執行檢視效果。
隨機抽獎的JS程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #wrap { text-align: center; width: 500px; margin: 100px auto; position: relative; } #ul1 { width: 303px; height: 303px; margin: 50px auto; padding: 0; border-top: 1px solid black; border-left: 1px solid black; } #ul1 li { float: left; border-right: 1px solid black; border-bottom: 1px solid black; list-style: none; width: 100px; height: 100px; line-height: 100px; text-align: center; } #tooltips { width: 100%; height: 100%; background-color: rgba(0,0.5); position: absolute; top: 0; z-index: 999; display: none; } #info .btn button { background-color: #009f95; color: white; outline: none; font-size: 10px; width: 60px; height: 30px; margin-left: 300px; } #info .content { height: 120px; padding: 20px; box-sizing: border-box; } </style> </head> <body> <div id="wrap"> <button id="btn">開始抽獎</button> <ul id="ul1"> <li>滑鼠</li> <li>1000萬</li> <li>100優惠券</li> <li>很遺憾</li> <li>鍵盤</li> <li>iPhoneX</li> <li>很遺憾</li> <li>迪拜10日遊</li> <li>很遺憾</li> </ul> </div> <!--提示資訊--> <div id="tooltips"> <div id="info"> <div class="title">資訊</div> <div class="content" id="content">恭喜你,中獎啦!!!</div> <div class="btn"> <button id="confirm">確定</button> </div> </div> </div> <script type="text/javascript"> // 思路:1.實現紅色背景切換 2當運動停止,彈出對話方塊-- 用js去修改tooltips的display屬性 變為block var oStart = document.getElementById("btn") // li標籤 var aLi = document.getElementsByTagName("li") // 提示框 var oTooltips = document.getElementById("tooltips") // 提示框的確定按鈕 var oConfirm = document.getElementById("confirm") // 提示框的提示內容 var oContent = document.getElementById("content") // 定時器id var timmer = null // 設定oTooltips的高度和html文件高度一樣,這樣把所有的內容都遮住 oTooltips.style.height = document.documentElement.offsetHeight + "px" oStart.onclick = function() { // 清空計時器 clearInterval(timmer) // 定義一個下標 var nowIndex = 0 // 生成一個隨機數,跑到第四圈的時候產生一個隨機中獎數字 var randomInt = getRandomInt(26,35) // 下面程式碼只是為了給使用者感覺:正在抽獎 timmer = setInterval(function() { changeColor(aLi,nowIndex % aLi.length) // 下標自動+1 nowIndex++ console.log("切換的下標",nowIndex,"隨機數",randomInt) // randomInt表示中獎的數字 ,如果nowIndex和randomInt一樣,我們就認為當前的li是抽中的獎品 if(nowIndex === randomInt) { clearInterval(timmer) // 停止以後,還應該往後切換一次 changeColor(aLi,nowIndex % aLi.length) // 在停止的時候,獲取到當前抽中的li的內容 if(aLi[randomInt % aLi.length].innerHTML === "很遺憾") { oContent.innerHTML = "很遺憾沒有中獎" } else { oContent.innerHTML = "恭喜你,你抽中了" + aLi[randomInt % aLi.length].innerHTML } oTooltips.style.display = "block" } },100) // 什麼時候停止?當中獎的時候停止,抽中了誰? // 可以用隨機數生成一個具體的數字 randomInt // 完善功能:提示使用者抽中了什麼 2讓背景切換多跑幾圈 } // 當點選提示框確定按鈕的時候,提示框消失 oConfirm.onclick = function() { oTooltips.style.display = "none" } // 封裝切換一個切換背景的方法 function changeColor(aLi,nowIndex) { for(var i = 0; i < aLi.length; i++) { // 清除上一個紅色背景,全部設定成白色 aLi[i].style.backgroundColor = "white" } // 當前下標背景設定成紅色 aLi[nowIndex].style.backgroundColor = "red" } // 獲取隨機數的方法 function getRandomInt(min,max) { return Math.floor(Math.random() * (max - min + 1) + min) } </script> </body> </html>
小編還為大家準備了精彩的專題:javascript經典小遊戲彙總
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。