JS實現簡單的抽獎轉盤效果示例

2019-11-19 12:07:56

字體：大中小

來源：轉載

供稿：網友

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

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.49028c.com JS抽獎轉盤</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.VeVB.COm/code/HtmlJsRun測試上述代碼，可得如下運行效果：