扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS实现随机抽奖小功能
  • 409

0
分享到

JS实现随机抽奖小功能

2024-04-02 19:04:59 409人浏览 独家记忆
摘要

本文实例为大家分享了js实现随机抽奖小功能的具体代码，供大家参考，具体内容如下 点击开始按钮开始抽奖，div依次变红！下面是js代码，需要的自取 <script>    

本文实例为大家分享了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;
        
        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>

上面就是结果啦！

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

--结束END--

本文标题: JS实现随机抽奖小功能

本文链接: https://lsjlt.com/news/162133.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS实现随机抽奖小功能
    本文实例为大家分享了JS实现随机抽奖小功能的具体代码，供大家参考，具体内容如下 点击开始按钮开始抽奖，div依次变红！下面是js代码，需要的自取 <script>    ...
    99+
    2024-04-02
  • js实现简单抽奖小功能
    本文实例为大家分享了js实现简单抽奖小功能的具体代码，供大家参考，具体内容如下 1.场景： 点击按钮开始随机抽取奖品，当停止那刻停留在大屏幕的是抽中的奖品（“谢谢”即为没奖）。 2....
    99+
    2024-04-02
  • js实现转盘抽奖功能
    本文实例为大家分享了js实现转盘抽奖功能的具体代码，供大家参考，具体内容如下 效果：点击抽奖按钮，转盘开始旋转数圈后停止 示例： 抽奖html代码： <!DOCTYPE htm...
    99+
    2024-04-02
  • java简单随机抽奖功能怎么实现
    实现简单的随机抽奖功能可以使用Java的Random类来生成随机数。下面是一个简单的实现示例：```javaimport java....
    99+
    2023-08-31
    java
  • Python制作一个随机抽奖小工具的实现
    目录1. 核心功能设计2. GUI设计与实现3. 功能实现3.1 读取人员名单3.2. 随机抽奖3.3. 保存中奖名单3.4. GUI交互逻辑最近在工作中面向社群玩家组织了一场活动，需要进行随机抽奖，参考之前小明大佬...
    99+
    2022-06-02
    Python 随机抽奖小工具 Python 随机抽奖
  • C语言实现随机抽奖程序
    本文实例为大家分享了C语言实现抽奖小程序的具体代码，供大家参考，具体内容如下 #include<stdio.h> #include<stdlib.h> #...
    99+
    2024-04-02
  • python随机抽奖系统怎么实现
    要实现一个Python随机抽奖系统，可以按照以下步骤进行：1. 导入random模块，用于生成随机数。```pythonimport...
    99+
    2023-08-16
    python
  • java实现幸运抽奖功能
    本文实例为大家分享了java实现幸运抽奖功能的具体代码，供大家参考，具体内容如下 本系统较为简单，未使用是什么多的算法，也未添加保存文件读取文件功能， 1、任务 模拟注册登录幸运抽奖...
    99+
    2024-04-02
  • java实现抽奖功能解析
    本文实例为大家分享了java实现抽奖功能的具体代码，供大家参考，具体内容如下 抽一个： 输入抽奖人数，生成随机数字进行抽奖。 比如：楼主抽幸运儿送游戏，选择前100楼抽取一个幸运儿。...
    99+
    2024-04-02
  • java如何实现抽奖功能
    本篇内容主要讲解“java如何实现抽奖功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“java如何实现抽奖功能”吧!Java可以用来干什么Java主要应用于：1. web开发；2. Andro...
    99+
    2023-06-14
  • vue组件封装实现抽奖随机数
    本文实例为大家分享了vue组件封装实现抽奖随机数的具体代码，供大家参考，具体内容如下 一、子组件 <template>     <div>      <...
    99+
    2024-04-02
  • 基于Redis实现抽奖功能及问题小结
    1、分析 公司年底要做年会所有的员工都要参与抽奖的环节 平台的产品要进行抽奖活动 这个时候我们可以利用redis中的set集合中的spop来实现。 特征：抽奖成功...
    99+
    2024-04-02
  • vue实现大转盘抽奖功能
    本文实例为大家分享了vue实现大转盘抽奖的具体代码，供大家参考，具体内容如下 效果图如下 中奖提示 代码如下 <template>   <div class="...
    99+
    2024-04-02
  • Android 实现九宫格抽奖功能
    目录效果展示实现步骤 1.生成抽奖矩形：2.添加奖品图片：3.实现抽奖动画：4.实现动态设置参数：5.添加抽奖结果回调效果展示 实现步骤 1.生成抽奖矩形： 其中每个矩形的宽高相...
    99+
    2024-04-02
  • C语言怎么实现随机抽奖程序
    要实现随机抽奖程序，可以按照以下步骤进行：1. 导入头文件：```c#include #include #include ```2....
    99+
    2023-08-18
    C语言
  • 基于JS+Canvas的lucky-canvas 抽奖功能
    目录ucky-canvas 介绍lucky-canvas 功能特点自由配置多端适配响应式代码块展示效果图展示代码如下抽奖一抽奖二抽奖三ucky-canvas 介绍 一个基于 Js +...
    99+
    2024-04-02
  • vue实现简单转盘抽奖功能
    本文实例为大家分享了vue实现简单转盘抽奖的具体代码，供大家参考，具体内容如下 样式请大家忽略（自己调），主要看JS代码实现，点击按钮后调用start方法，判断是否在转动状态，如果...
    99+
    2024-04-02
  • java如何实现幸运抽奖功能
    本篇内容介绍了“java如何实现幸运抽奖功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1、任务模拟注册登录幸运抽奖全过程2、主要功能：注...
    99+
    2023-06-29
  • 基于JavaScript实现轮盘抽奖功能
    目录实现步骤html代码：css代码：js代码：不知道今天自己该吃什么，一招帮你解决选择困难症。通过html+css+js实现一个轮盘抽奖功能。我们可以将平时吃的饭菜输入到代码中，每...
    99+
    2023-01-13
    js轮盘抽奖 js抽奖
  • 怎么使用jQuery实现抽奖功能
    本文小编为大家详细介绍“怎么使用jQuery实现抽奖功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么使用jQuery实现抽奖功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。一、实现抽奖前的准备工作在开始...
    99+
    2023-07-05
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作