JS實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)轉(zhuǎn)盤(pán)效果示例

更新時(shí)間：2019年02月16日 11:53:01 作者：s_psycho

這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)轉(zhuǎn)盤(pán)效果,涉及javascript數(shù)值計(jì)算與頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)轉(zhuǎn)盤(pán)效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dhdzp.com JS抽獎(jiǎng)轉(zhuǎn)盤(pán)</title>
  <style>
  *{
    margin:0;
    padding:0;
    list-style: none;
  }
    .big{
      width: 318px;
      height: 318px;
      margin:100px auto;
    }
    .big>div{
      width: 100px;
      height: 100px;
      background: pink;
      float: left;
      line-height: 100px;
      text-align: center;
      border: solid;
    }
    .big>div:nth-of-type(5){
      background: yellow;
      cursor: pointer;
    }
    #act{
      background: red;
    }
  </style>
</head>
<body>
<div class="big">
  <div class="small" id="act">1</div>
  <div class="small">2</div>
  <div class="small">3</div>
  <div class="small">8</div>
  <div id="cj">點(diǎn)擊抽獎(jiǎng)</div>
  <div class="small">4</div>
  <div class="small">7</div>
  <div class="small">6</div>
  <div class="small">5</div>
</div>
<script>
  var arrDiv=document.getElementsByClassName("small");
  var oCj=document.getElementById("cj");
  var num=0;
  var shijian=Math.random()*5000+3200;
  oCj.onclick=function(){
    oTime=setInterval(dianji,200);
  }
  function dianji() {
    num=num+1;
    if (num>arrDiv.length-1){
      num=0
    }
    for(j=0;j<arrDiv.length;j++){
      arrDiv[j].id="";
    }
    arrDiv[num].id="act";
    setTimeout(tingzhi,shijian);
    function tingzhi() {
      clearInterval(oTime)
    }
   }
</script>
</body>
</html>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行效果：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js定時(shí)器不準(zhǔn)確問(wèn)題的解決方法
本文主要介紹了js定時(shí)器不準(zhǔn)確問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
js獲取div高度的代碼
不錯(cuò)的獲取div高度的代碼，主要是方便測(cè)試一些信息，用到了javascript的offsetHeight屬性
2008-08-08
復(fù)制js對(duì)象方法(詳解)
復(fù)制js對(duì)象方法，需要的朋友可以參考下
2013-07-07
讓html頁(yè)面不緩存js的實(shí)現(xiàn)方法
這篇文章主要介紹了讓html頁(yè)面不緩存js的實(shí)現(xiàn)方法,分析了HTML頁(yè)面緩存js的原理,并由此分析實(shí)現(xiàn)不緩存js的方法,是非常實(shí)用的技巧,需要的朋友可以參考下
2014-10-10
javascript中的set的常用方法和操作
這篇文章主要介紹了javascript中的set的常用方法和操作,在JavaScript中Set是一種特殊的數(shù)據(jù)結(jié)構(gòu),用于存儲(chǔ)唯一的值,創(chuàng)建Set對(duì)象可以通過(guò)new?Set()實(shí)現(xiàn),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-11-11
js + css實(shí)現(xiàn)標(biāo)簽內(nèi)容切換功能(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇js + css實(shí)現(xiàn)標(biāo)簽內(nèi)容切換功能(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
靈活應(yīng)用js調(diào)試技巧解決樣式問(wèn)題的步驟分享
在很多時(shí)候，前端開(kāi)發(fā)人員使用JS腳本，對(duì)頁(yè)面Dom結(jié)構(gòu)或者是樣式做出了修改，會(huì)造成一些意想不到的bug
2012-03-03
webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法
這篇文章主要給大家介紹了在webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法，文中介紹的非常詳細(xì)，對(duì)遇到這個(gè)問(wèn)題的朋友們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-06-06
Bootstrap實(shí)現(xiàn)帶暫停功能的輪播組件(推薦)
最近小編在項(xiàng)目中用到了一款帶輪播組件，功能非常齊全，可以設(shè)置各種標(biāo)題樣式、動(dòng)畫(huà)效果、輪播時(shí)間、開(kāi)始暫停等功能，下面小編通過(guò)本文給大家詳細(xì)介紹下實(shí)現(xiàn)過(guò)程，需要的朋友參考下吧
2016-11-11
實(shí)現(xiàn)點(diǎn)擊列表彈出列表索引的兩種方式
使用利用事件冒泡委托給列表的父節(jié)點(diǎn)去處理的方式第二種方式就是使用閉包了，感興趣的你可以參考下本文，或許對(duì)你學(xué)習(xí)js有所幫助
2013-03-03