真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

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

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

前言

在前端的開發(fā)當(dāng)中,我們肯定會遇到隨機(jī)抽獎的需求。我們要怎么去實(shí)現(xiàn)呢?下面就來分享隨機(jī)抽獎的JS代碼,有需要的小伙伴可以復(fù)制到編譯器當(dāng)中運(yùn)行查看效果。

隨機(jī)抽獎的JS代碼




 
 
 
 
 #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;
 }
 
 

 
 
 開始抽獎
 
 
  • 鼠標(biāo)
  •  
  • 1000萬
  •  
  • 100優(yōu)惠券
  •  
  • 很遺憾
  •  
  • 鍵盤
  •  
  • iPhoneX
  •  
  • 很遺憾
  •  
  • 迪拜10日游
  •  
  • 很遺憾
  •    
           信息
     恭喜你,中獎啦?。?!
        確定          // 思路:1.實(shí)現(xiàn)紅色背景切換 2當(dāng)運(yùn)動停止,彈出對話框-- 用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ī)中獎數(shù)字  var randomInt = getRandomInt(26, 35)  // 下面代碼只是為了給用戶感覺:正在抽獎  timmer = setInterval(function() {   changeColor(aLi, nowIndex % aLi.length)   // 下標(biāo)自動+1   nowIndex++   console.log("切換的下標(biāo)", nowIndex, "隨機(jī)數(shù)", randomInt)   // randomInt表示中獎的數(shù)字 ,如果nowIndex和randomInt一樣,我們就認(rèn)為當(dāng)前的li是抽中的獎品   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 = "很遺憾沒有中獎"   } else {   oContent.innerHTML = "恭喜你,你抽中了" + aLi[randomInt % aLi.length].innerHTML   }   oTooltips.style.display = "block"   }  }, 100)  // 什么時(shí)候停止?當(dā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)  }    

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

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


    網(wǎng)頁題目:js怎么實(shí)現(xiàn)隨機(jī)抽獎-創(chuàng)新互聯(lián)
    URL地址:http://weahome.cn/article/cecspo.html

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回頂部