js怎么實現(xiàn)隨機抽獎-創(chuàng)新互聯(lián)

這篇文章主要介紹js怎么實現(xiàn)隨機抽獎，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司長期為近千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為尖草坪企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站設計，尖草坪網(wǎng)站改版等技術服務。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

前言

在前端的開發(fā)當中，我們肯定會遇到隨機抽獎的需求。我們要怎么去實現(xiàn)呢？下面就來分享隨機抽獎的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, 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優(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 class="content" id="content">恭喜你，中獎啦！??！</div>
 <div class="btn">
  <button id="confirm">確定</button>
 </div>
 </div>
 </div>
 <script type="text/javascript">
 // 思路：1.實現(xiàn)紅色背景切換 2當運動停止，彈出對話框-- 用js去修改tooltips的display屬性 變?yōu)閎lock
 var oStart = document.getElementById("btn")
 // li標簽
 var aLi = document.getElementsByTagName("li")
 // 提示框
 var oTooltips = document.getElementById("tooltips")
 // 提示框的確定按鈕
 var oConfirm = document.getElementById("confirm")
 // 提示框的提示內(nèi)容
 var oContent = document.getElementById("content")
 // 定時器id
 var timmer = null
 // 設置oTooltips的高度和html文檔高度一樣，這樣把所有的內(nèi)容都遮住
 oTooltips.style.height = document.documentElement.offsetHeight + "px"
 oStart.onclick = function() {
 // 清空計時器
 clearInterval(timmer)
 // 定義一個下標
 var nowIndex = 0
 // 生成一個隨機數(shù),跑到第四圈的時候產(chǎn)生一個隨機中獎數(shù)字
 var randomInt = getRandomInt(26, 35)
 // 下面代碼只是為了給用戶感覺：正在抽獎
 timmer = setInterval(function() {
  changeColor(aLi, nowIndex % aLi.length)
  // 下標自動+1
  nowIndex++
  console.log("切換的下標", nowIndex, "隨機數(shù)", randomInt)
  // randomInt表示中獎的數(shù)字 ，如果nowIndex和randomInt一樣，我們就認為當前的li是抽中的獎品
  if(nowIndex === randomInt) {
  clearInterval(timmer)
  // 停止以后，還應該往后切換一次
  changeColor(aLi, nowIndex % aLi.length)
  // 在停止的時候，獲取到當前抽中的li的內(nèi)容
  if(aLi[randomInt % aLi.length].innerHTML === "很遺憾") {
  oContent.innerHTML = "很遺憾沒有中獎"
  } else {
  oContent.innerHTML = "恭喜你，你抽中了" + aLi[randomInt % aLi.length].innerHTML
  }
  oTooltips.style.display = "block"
  }
 }, 100)
 // 什么時候停止？當中獎的時候停止，抽中了誰？
 // 可以用隨機數(shù)生成一個具體的數(shù)字 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"
 }
 // 獲取隨機數(shù)的方法
 function getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min + 1) + min)
 }
 </script>
 </body>

</html>

以上是“js怎么實現(xiàn)隨機抽獎”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前名稱：js怎么實現(xiàn)隨機抽獎-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://www.rwnh.cn/article30/cecspo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、Google、定制開發(fā)、網(wǎng)站改版、虛擬主機、營銷型網(wǎng)站建設

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

js怎么實現(xiàn)隨機抽獎-創(chuàng)新互聯(lián)