脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS随机抽奖小功能

JS实现随机抽奖小功能

 更新时间：2022年01月11日 09:07:21   作者：土豆切成丝  
这篇文章主要为大家详细介绍了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>

上面就是结果啦！

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

您可能感兴趣的文章:

相关文章

  • JavaScript中的this妙用实例分析

    JavaScript中的this妙用实例分析

    这篇文章主要介绍了JavaScript中的this妙用,结合实例形式分析了JavaScript中的this基本功能、用法及操作注意事项,需要的朋友可以参考下
    2020-05-05
  • ES6中的Promise对象与async和await方法详解

    ES6中的Promise对象与async和await方法详解

    Promise是es6引入的异步编程薪解决方案，语法上promise就是一个构造函数，用来封装异步操作病可以获取其成功或失败的结果，这篇文章主要介绍了ES6中的Promise对象与async和await方法,需要的朋友可以参考下
    2022-12-12
  • 使用Echarts绘制动态排序折线图

    使用Echarts绘制动态排序折线图

    Echarts,作为一个使用广泛的JavaScript图表库,提供了创建动态排序折线图的强大功能,下面就跟随小编一起学习一下如何使用Echarts绘制动态排序折线图吧
    2023-12-12
  • JavaScript中的事件处理程序

    JavaScript中的事件处理程序

    这篇文章介绍了JavaScript中的事件处理程序，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-04-04
  • 微信小程序实现录音Record功能

    微信小程序实现录音Record功能

    这篇文章主要为大家详细介绍了微信小程序实现录音Record功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 微信小程序视频弹幕位置随机

    微信小程序视频弹幕位置随机

    这篇文章主要介绍了微信小程序视频弹幕位置随机，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • select、radio表单回显功能实现避免使用jquery载入赋值

    select、radio表单回显功能实现避免使用jquery载入赋值

    select、radio表单回显避免使用jquery载入赋值，最好的做法是：在jsp页面进行逻辑判断，具体实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-06-06
  • js返回上一页并刷新代码整理

    js返回上一页并刷新代码整理

    返回上一页并刷新在此功能有利于用户的体验,是每一个web开发人员所必备的一项，长话短说，今天介绍实现此功能的一个方法，需要了解的朋友可以参考下
    2012-12-12
  • 原生javascript实现图片无缝滚动效果

    原生javascript实现图片无缝滚动效果

    这篇文章主要介绍了原生javascript实现图片无缝滚动效果的相关资料,需要的朋友可以参考下
    2016-02-02
  • javascript阻止浏览器后退事件防止误操作清空表单

    javascript阻止浏览器后退事件防止误操作清空表单

    由于误操作比较多，有时没有选中文本框，然后不小心按了退格之后，刚刚辛苦填好的表单就什么也后退的没有了，针对这个问题，本文给出了详细的解决方法，需要朋友不要错过
    2013-11-11

最新评论