快捷導(dǎo)航

JS實現(xiàn)簡單的抽獎轉(zhuǎn)盤效果示例

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>m.fzitv.net JS抽獎轉(zhuǎ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">點擊抽獎</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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行效果：

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

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

您可能感興趣的文章:

相關(guān)文章

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