JS实现简单的抽奖转盘效果示例

2024-05-06 16:48:09

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现简单的抽奖转盘效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.vevb.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>

可得如下运行效果：

JS,抽奖,转盘