js實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)
前言
在前端的開發(fā)當(dāng)中，我們肯定會(huì)遇到隨機(jī)抽獎(jiǎng)的需求。我們要怎么去實(shí)現(xiàn)呢？下面就來分享隨機(jī)抽獎(jiǎng)的JS代碼，有需要的小伙伴可以復(fù)制到編譯器當(dāng)中運(yùn)行查看效果。
隨機(jī)抽獎(jiǎng)的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, 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'>開始抽獎(jiǎng)</button> <ul id='ul1'> <li>鼠標(biāo)</li> <li>1000萬</li> <li>100優(yōu)惠券</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 id='content'>恭喜你，中獎(jiǎng)啦！！！</div> <div class='btn'> <button id='confirm'>確定</button> </div> </div> </div> <script type='text/javascript'> // 思路：1.實(shí)現(xiàn)紅色背景切換 2當(dāng)運(yùn)動(dòng)停止，彈出對(duì)話框-- 用js去修改tooltips的display屬性 變?yōu)閎lock var oStart = document.getElementById('btn') // li標(biāo)簽 var aLi = document.getElementsByTagName('li') // 提示框 var oTooltips = document.getElementById('tooltips') // 提示框的確定按鈕 var oConfirm = document.getElementById('confirm') // 提示框的提示內(nèi)容 var oContent = document.getElementById('content') // 定時(shí)器id var timmer = null // 設(shè)置oTooltips的高度和html文檔高度一樣，這樣把所有的內(nèi)容都遮住 oTooltips.style.height = document.documentElement.offsetHeight + 'px' oStart.onclick = function() { // 清空計(jì)時(shí)器 clearInterval(timmer) // 定義一個(gè)下標(biāo) var nowIndex = 0 // 生成一個(gè)隨機(jī)數(shù),跑到第四圈的時(shí)候產(chǎn)生一個(gè)隨機(jī)中獎(jiǎng)數(shù)字 var randomInt = getRandomInt(26, 35) // 下面代碼只是為了給用戶感覺：正在抽獎(jiǎng) timmer = setInterval(function() { changeColor(aLi, nowIndex % aLi.length) // 下標(biāo)自動(dòng)+1 nowIndex++ console.log('切換的下標(biāo)', nowIndex, '隨機(jī)數(shù)', randomInt) // randomInt表示中獎(jiǎng)的數(shù)字 ，如果nowIndex和randomInt一樣，我們就認(rèn)為當(dāng)前的li是抽中的獎(jiǎng)品 if(nowIndex === randomInt) { clearInterval(timmer) // 停止以后，還應(yīng)該往后切換一次 changeColor(aLi, nowIndex % aLi.length) // 在停止的時(shí)候，獲取到當(dāng)前抽中的li的內(nèi)容 if(aLi[randomInt % aLi.length].innerHTML === '很遺憾') { oContent.innerHTML = '很遺憾沒有中獎(jiǎng)' } else { oContent.innerHTML = '恭喜你，你抽中了' + aLi[randomInt % aLi.length].innerHTML } oTooltips.style.display = 'block' } }, 100) // 什么時(shí)候停止？當(dāng)中獎(jiǎng)的時(shí)候停止，抽中了誰？ // 可以用隨機(jī)數(shù)生成一個(gè)具體的數(shù)字 randomInt // 完善功能：提示用戶抽中了什么 2讓背景切換多跑幾圈 } // 當(dāng)點(diǎn)擊提示框確定按鈕的時(shí)候，提示框消失 oConfirm.onclick = function() { oTooltips.style.display = 'none' } // 封裝切換一個(gè)切換背景的方法 function changeColor(aLi, nowIndex) { for(var i = 0; i < aLi.length; i++) { // 清除上一個(gè)紅色背景，全部設(shè)置成白色 aLi[i].style.backgroundColor = 'white' } // 當(dāng)前下標(biāo)背景設(shè)置成紅色 aLi[nowIndex].style.backgroundColor = 'red' } // 獲取隨機(jī)數(shù)的方法 function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min) } </script> </body></html>
小編還為大家準(zhǔn)備了精彩的專題：javascript經(jīng)典小游戲匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP動(dòng)態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享2. vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決3. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)4. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能5. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論6. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向7. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)財(cái)務(wù)記賬管理系統(tǒng)8. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享9. vue前端RSA加密java后端解密的方法實(shí)現(xiàn)10. asp批量添加修改刪除操作示例代碼
網(wǎng)公網(wǎng)安備