脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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>

上面就是结果啦！

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

您可能感兴趣的文章:

相关文章

  • JS基于面向对象实现的选项卡效果示例

    JS基于面向对象实现的选项卡效果示例

    这篇文章主要介绍了JS基于面向对象实现的选项卡效果,结合实例形式分析了javascript基于面向对象技术动态操作页面元素的流程与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • 前端处理ASCII码转HEX码及校验具体实现

    前端处理ASCII码转HEX码及校验具体实现

    这篇文章主要介绍了在JavaScript编程中将ASCII码转换为十六进制（HEX）码的需求和场景,包括Wi-Fi配置、数据加密和网络协议传输等,文章详细描述了HEX编码的原理和作用,并提供了具体实现的示例,需要的朋友可以参考下
    2025-03-03
  • Javascript实现代码折叠功能

    Javascript实现代码折叠功能

    代码折叠起来,使整段程序缩成一行,看起来清爽了许多。大家在使用Visual Studio环境进行开发时，可以把某个类或某个函数折叠起来，在很多网页上也有类似的功能，那到底是如何实现的呢？其实很简单，只要通过JavaScript就可以实现。
    2016-08-08
  • webpack.DefinePlugin与cross-env区别详解

    webpack.DefinePlugin与cross-env区别详解

    这篇文章主要介绍了webpack.DefinePlugin与cross-env区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaScript判断FileUpload控件上传文件类型

    JavaScript判断FileUpload控件上传文件类型

    在CS后台代码中获取FileUpload控件上传文件的类型是比较容易的！那么，能否在客户端通过JavaScript脚本判断FileUpload上传文件类型呢？答案是可以的，下面通过一个小例子为大家展示
    2015-09-09
  • js限制input标签中只能输入中文

    js限制input标签中只能输入中文

    这篇文章主要介绍了js限制input标签中只能输入中文的的相关资料,需要的朋友可以参考下
    2015-06-06
  • 手机安装GreasyFork油猴js脚本的教程

    手机安装GreasyFork油猴js脚本的教程

    Iceraven浏览器需要安装Tampermonkey插件来安装GF油猴脚本，本文给大家介绍手机安装GreasyFork油猴js脚本的教程，安装过程给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2021-12-12
  • JavaScript的各种常见函数定义方法

    JavaScript的各种常见函数定义方法

    这篇文章主要介绍了JavaScript的各种常见函数定义方法,包含了一些技巧的测试与分析总结,需要的朋友可以参考下
    2014-09-09
  • 谈一谈javascript闭包

    谈一谈javascript闭包

    这篇文章主要介绍了javascript闭包，闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • uni-app设置缓存过期时间的操作方法

    uni-app设置缓存过期时间的操作方法

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web（响应式）、以及各种小程序,本文给大家介绍了uni-app设置缓存过期时间的操作方法,需要的朋友可以参考下
    2024-12-12

最新评论