JS实现随机抽奖小功能

本文实例为大家分享了JS实现随机抽奖小功能的具体代码，供大家参考，具体内容如下

点击开始按钮开始抽奖，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，css代码

<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{
       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>
        <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>

上面就是结果啦！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。