javascript代码 - JS实现随机抽奖功能

编程之家收集整理的这篇文章主要介绍了javascript代码 - JS实现随机抽奖功能编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

点击开始按钮开始抽奖,div依次变红!下面是js代码,需要的自取   <script>

点击开始按钮开始抽奖,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>

下面是HTMLCSS代码

style>
    .father{
        wIDth: 600px;
        height: 600px;
        /* border1px solID darkorchID; */
        positionrelative;
        margin: 20px auto;
    }
   
    input{
        wIDth: 100px;
        height: 100px;
    }
   .son1{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       top: 0;
       left: 0;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son2{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       top: 0;
       left: 100px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son3{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       top: 0;
       left: 200px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son4{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       top: 0;
       left: 300px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son5{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       top: 0;
       left: 400px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son6{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       top: 0;
       left: 500px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son7{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       top: 100px;
       right: -2px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son8{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       top: 200px;
       right: -2px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son9{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       top: 300px;
       right: -2px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son10{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       top: 400px;
       right: -2px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son11{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       top: 500px;
       right: -2px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son12{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       bottom: -2px;
       right: 100px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son13{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       bottom: -2px;
       right: 200px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son14{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       bottom: -2px;
       right: 300px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son15{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       bottom: -2px;
       right: 400px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son16{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       bottom: -2px;
       right: 500px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son17{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       bottom: 98px;
       right: 500px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son18{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       bottom: 198px;
       right: 500px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son19{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       bottom: 298px;
       right: 500px;
       border1px solID brown;
       text-align: center;
       line-height: 100px;
   }
   .son20{
       wIDth: 100px;
       height: 100px;
       positionabsolute;
       bottom: 398px;
       right: 500px;
       border1px 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>

上面就是结果啦!

这个记录下来为了方便以后使用方便,也希望大佬们多多交流,多多留言,指出我的不足的之处啦!

总结

以上是编程之家为你收集整理的javascript代码 - JS实现随机抽奖功能全部内容,希望文章能够帮你解决javascript代码 - JS实现随机抽奖功能所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

JavaScript相关文章

解决办法:if (el.currentStyle.position == &#39;static&#39;) { el.style.position = &#39;relative&#39;; }把D
在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称&quot;实例&quot;)共有的属性和方法。Javascript语言不支持&quot;类&quot;,但是可以
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt; &lt;!DOCTYPE html PUBLIC &quot;-//W
之前在一个外国的网站上看到一个挺好的算法(http://www.emanueleferonato.com/2010/02/13/flash-as3-pixel-based-circle-collisi
extjs grid renderer用法今天在做项目时,需要在列表中的某列添加一个超链接,首先要取得当前选中行的数据,判断数据类型,然后链接到不同的页面,研究下。发现ExtJs提供了一个很强的方法如
现在火狐下可以直接只用border-image属性了,不过我在使用的时候遇到一个使用后没有效果的问题(PS:测试了火狐、chrome、safari只有火狐下无效),纠结了半个小时,css代码如下:.b
触摸事件三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:1.touchstart:手指放在一个DOM元素上。2.touchmove:手指拖曳一个DOM元素。3.touchend:手指从一个DO
一、原型链 原型链主要是通过 __proto__和prototype两个属性来实现的。(注:由于__proto__是私有属性,很多浏览器都没有开放,以下都是在谷歌浏览器中实现的) 1、“类”的__pr
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注