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

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

js怎么實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)

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

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

前言

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

隨機(jī)抽獎(jiǎng)的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;
 }
 
 

 
 
 開(kāi)始抽獎(jiǎng)
 
 
  • 鼠標(biāo)
  •  
  • 1000萬(wàn)
  •  
  • 100優(yōu)惠券
  •  
  • 很遺憾
  •  
  • 鍵盤(pán)
  •  
  • iPhoneX
  •  
  • 很遺憾
  •  
  • 迪拜10日游
  •  
  • 很遺憾
  •    
           信息
     恭喜你,中獎(jiǎng)啦?。?!
        確定          // 思路:1.實(shí)現(xiàn)紅色背景切換 2當(dāng)運(yùn)動(dòng)停止,彈出對(duì)話(huà)框-- 用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)  // 下面代碼只是為了給用戶(hù)感覺(jué):正在抽獎(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 = "很遺憾沒(méi)有中獎(jiǎng)"   } else {   oContent.innerHTML = "恭喜你,你抽中了" + aLi[randomInt % aLi.length].innerHTML   }   oTooltips.style.display = "block"   }  }, 100)  // 什么時(shí)候停止?當(dāng)中獎(jiǎng)的時(shí)候停止,抽中了誰(shuí)?  // 可以用隨機(jī)數(shù)生成一個(gè)具體的數(shù)字 randomInt  // 完善功能:提示用戶(hù)抽中了什么 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ī)抽獎(jiǎng)”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


    分享文章:js怎么實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)
    鏈接URL:http://weahome.cn/article/igcghs.html

    在線(xiàn)咨詢(xún)

    微信咨詢(xún)

    電話(huà)咨詢(xún)

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回頂部