本文例項為大家分享了實現隨機抽獎小功能的具體程式碼，供大家參考，具體內容如下

點選開始按鈕開始抽獎，div依次變紅！下面是js程式碼，需要的自取

<script>
    var but1 = document.getElementById("btn1")
    var but2 = document.getElementById("btn2")
    var alldiv = document.querySelectorAll(".father>div")
    console.log(alldiv);
    var index = 0;
    var flag = 0;
    but1.onclick=function(){
      if(flag == 0)
      {
        t = setInterval(()=>{
       
        index= index>=(alldiv.length-1)?0:++index;
        alldiv[index].style.backgroundColor = "gold";
        if(index !=0){
          alldiv[index-1].style.backgroundColor = "#fff";
        }else if(index==0){
          alldiv[19].style.backgroundColor = "#fff";
        }
         
       
        // alldiv[index].style.backgroundColor = "red";
        console.log(index)
        
      },1)
      flag = 1;
      }

      but2.onclick=function(){
      clearInterval(t);
      flag = 0;
    }
    }
       
</script>

下面是html，程式碼

<style>
  .father{
    width: 600px;
    height: 600px;
    /* border: 1px solid darkorchid; */
    position: relative;
    margin: 20px auto;
  }
 
  input{
    width: 100px;
    height: 100px;
  }
 .son1{
   width: 100px;
   height: 100px;
   position: absolute;
   top: 0;
   left: 0;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son2{
   width: 100px;
   height: 100px;
   position: absolute;
   top: 0;
   left: 100px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son3{
   width: 100px;
   height: 100px;
   position: absolute;
   top: 0;
   left: 200px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son4{
   width: 100px;
   height: 100px;
   position: absolute;
   top: 0;
   left: 300px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son5{
   width: 100px;
   height: 100px;
   position: absolute;
   top: 0;
   left: 400px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son6{
   width: 100px;
   height: 100px;
   position: absolute;
   top: 0;
   left: 500px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son7{
   width: 100px;
   height: 100px;
   position: absolute;
   top: 100px;
   right: -2px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son8{
   width: 100px;
   height: 100px;
   position: absolute;
   top: 200px;
   right: -2px;
   border: 1px solid brown;
   text-align: center;
   line-height: 
 
100px;
 }
 .son9{
   width: 100px;
   height: 100px;
   position: absolute;
   top: 300px;
   right: -2px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son10{
   width: 100px;
   height: 100px;
   position: absolute;
   top: 400px;
   right: -2px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son11{
   width: 100px;
   height: 100px;
   position: absolute;
   top: 500px;
   right: -2px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son12{
   width: 100px;
   height: 100px;
   position: absolute;
   bottom: -2px;
   right: 100px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son13{
   width: 100px;
   height: 100px;
   position: absolute;
   bottom: -2px;
   right: 200px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son14{
   width: 100px;
   height: 100px;
   position: absolute;
   bottom: -2px;
   right: 300px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son15{
xTRbDiZiYE
 
   width: 100px;
   height: 100px;
   position: absolute;
   bottom: -2px;
   right: 400px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son16{
   width: 100px;
   height: 100px;
   position: absolute;
   bottom: -2px;
   right: 500px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son17{
   width: 100px;
   height: 100px;
   position: absolute;
   bottom: 98px;
   right: 500px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son18{
   width: 100px;
   height: 100px;
   position: absolute;
   bottom: 198px;
   right: 500px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son19{
   width: 100px;
   height: 100px;
   position: absolute;
   bottom: 298px;
   right: 500px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 .son20{
   width: 100px;
   height: 100px;
   position: absolute;
   bottom: 398px;
   right: 500px;
   border: 1px solid brown;
   text-align: center;
   line-height: 100px;
 }
 
  #btn1{
    position:absolute;
    top: 250px;
    left: 200px;
  }
  #btn2{
    position:absolute;
    top: 250px;
    left: 300px;
   
  }
</style>
<body>
  <div class="father">
   
    <input type="button" value="開始" id="btn1">
    <input type="button" value="停止" id="btn2">
    <div class="son1">1</div>
    <div class="son2">2</div>
    <div class="son3">3</div>
    <div class="son4">4</div>
    <div class="son5">5</div>
    <div class="son6">6</div>
    <div class="son7">7</div>
    <div class="son8">8</div>
    <div class="son9">9</div>
    <div class="son10">10</div&xTRbDiZiYEgt;
    <div class="son11">11</div>
    <div class="son12">12</div>
    <div class="son13">13</div>
    <div class="son14">14</div>
    <div class="son15">15</div>
    <div class="son16">16</div>
    <div class="son17">17</div>
    <div class="son18">18</div>
    <div class="son19">19</div>
    <div class="son20" >20</div>
   
</div>

上面就是結果啦！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。