JS实现简单的九宫格抽奖

本文实例为大家分享了JS实现简单九宫格抽奖的具体代码，供大家参考，具体内容如下

结构

<body>

    <div id="fa">
        <div class="option">1</div>
        <div class="option">5</div>
        <div class="option">3</div>
        <div class="option">4</div>
        <div id="start">开始抽奖</div>
        <div class="option">5</div>
        <div class="option">6</div>
        <div class="option">7</div>
        <div class="option">8</div>
    </div>
</body>

样式

<style>
        #fa {
            width: 600px;
            height: 600px;
            border: 1px solid red;

        }

        #fa>div {
            width: 33%;
            height: 33%;
            border: 1px solid red;
            float: left;
            line-height: 200px;
            text-align: center;//文本居中
            font-size: 40px;
            font-weight: 800;//加粗字体

        }

        #start {
            cursor: pointer;//使鼠标移入时出现小手图标
            background-color: pink;
        }
</style>

JS实现抽奖

逻辑分析：

1.点击中间的开始抽奖时触发一个定时器
2.触发定时器后，随机生成一个数字，通过这个数字来获取当前所在元素
3.设置一个时间来结束定时器，结束抽奖

<script>
         let btn = document.getElementById('start');//获取到开始抽奖按钮
        let options = document.getElementsByClassName('option');//获取到8个奖区
        let timer =null;//防止定时器多次触发，初始值设为null

        //为btn绑定一个单击事件
        btn.onclick = function () {
            //设置一个初始值 作为时间判断
            let num = 0;
            
            if (timer == null) {
                //触发一个定时器
               timer = setInterval(function () {

                    num++;

                     //随机产生一个0 - 7 的数字 通过该数字作为数组的下标来获取到div
                    let ran = Math.round(Math.random() * (7 - 0) + 0);
                    //round是因为Math.random() * (7 - 0) + 0)取出的随机数是含小数的一串数字，所以需要取整
                    
                    //改变选中的元素背景颜色之前，将所有元素的背景颜色恢复
                    for (let i = 0; i < options.length; i++) {
                        options[i].style.backgroundColor = '';
                    }

                    //给选中的元素设置一个背景颜色
                    options[ran].style.backgroundColor = 'tomato';

                    //给定时器一个时间，到时间停止定时器
                    if(num == 5){
                        clearInterval(timer)
                    }

                }, 1000)
            }

        }
</script>

效果

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

赞 (0)

相关推荐

  • JavaScript实现九宫格抽奖功能的示例代码

    JavaScript实现九宫格抽奖功能的示例代码

    目录 效果图 实现流程 主要代码 效果图 话不多说,直接上效果: 实现流程 主要流程为: 1. 根据效果图,构建静态页面 2. 获取元素(自带的属性) 3. 绑定事件 4. 事件触发之后 4.1 所有的li元素 在指定的时间间隔下 颜色随机变化 4.2 延时器 2秒后 清除定时器 4.3 在清除定时器之后,所有的li背景色复位,随机选一个 主要代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch

  • 原生JS实现九宫格抽奖

    本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下 上代码: <div class="wrapper"> <div>谢谢惠顾</div> <div>十万元现金</div> <div>谢谢惠顾</div> <div>iphone11</div> <div>抽奖</div> <div>美的冰箱</div> <

  • 原生JavaScript实现九宫格抽奖

    原生JavaScript实现九宫格抽奖

    本文实例为大家分享了JavaScript实现九宫格抽奖 的具体代码,供大家参考,具体内容如下 思路:通过移动背景颜色实现中奖信息,每一个方形元素,需要按顺序排列,加个延时器,当到最后一个的时候让它从0开始就可以动起来了,!! <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X

  • 原生JS实现九宫格抽奖效果

    原生JS实现九宫格抽奖效果

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> *{margin:0;padding:0;} #container{w

  • JavaScript实现九宫格抽奖

    JavaScript实现九宫格抽奖

    本文实例为大家分享了JavaScript实现九宫格抽奖的具体代码,供大家参考,具体内容如下 看到个抽奖案例,觉得还不错.就自己做了一个简单版本. 点击中间的开始,抽奖就会跑起来,速度由慢到快,再到慢,最后停下.停下的格子就是中奖的奖品. 主要思路: 1.抽奖的高亮色块轮循,使用一个 class 去控制. 2.要控制色块轮循的速度快慢,要用到计时器 setTimeout,可以控制轮循速度. 3.正在抽奖轮循的时候,开始按钮是不能点击的.所以要用一个变量判断当前是否正在轮循. 4.轮循的次数是一个随

  • JS实现简单九宫格抽奖

    用JavaScript写一个九宫格的抽奖盘,供大家参考,具体内容如下 点击中间的块,选中奖品的亮块会在边缘的8个块循环: 选中后,弹出选中的内容: 代码参考: HTML文件: <body> <div class="box">     <ul id="jiangPin">         <li><a href="javascript:viod(0);" ><span>奖品 1

  • php+lottery.js实现九宫格抽奖功能

    php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <script type="text/javascript" src="js/lottery.js"></script> 开始抽奖函数start_lottery() function start_lottery(){ if(flag){ //alert('正在抽奖

  • js实现九宫格抽奖

    本文实例为大家分享了js实现九宫格抽奖的具体代码,供大家参考,具体内容如下 <div id="contaner"> <div id="one">一块钱</div> <div id="two">谢谢惠顾</div> <div id="three">下去写作业</div> <div id="four">一局游戏<

  • JS实现简单的九宫格抽奖

    JS实现简单的九宫格抽奖

    本文实例为大家分享了JS实现简单九宫格抽奖的具体代码,供大家参考,具体内容如下 结构 <body>     <div id="fa">         <div class="option">1</div>         <div class="option">5</div>         <div class="option">3<

  • 微信小程序实现简单九宫格抽奖

    微信小程序实现简单九宫格抽奖

    本文实例为大家分享了微信小程序实现简单九宫格抽奖的具体代码,供大家参考,具体内容如下 废话不多说,先上样板图 代码就先wxml文件: <view id="container">   <!--左上-->   <view id="li" class='{{amplification_index===1?"indexli":""}}'>     一等奖     <view></v

  • JS实现简单的抽奖转盘效果示例

    JS实现简单的抽奖转盘效果示例

    本文实例讲述了JS实现简单的抽奖转盘效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS抽奖转盘</title> <style> *{ margin:0; padding:0; list-style: none; } .big{

  • js实现简单抽奖功能

    js实现简单抽奖功能

    本文实例为大家分享了js实现简单抽奖功能的具体代码,供大家参考,具体内容如下 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ border: 1px solid aqua; height: 100px; width: 200px; text-align: center; lin

  • js实现简单抽奖小功能

    js实现简单抽奖小功能

    本文实例为大家分享了js实现简单抽奖小功能的具体代码,供大家参考,具体内容如下 1.场景: 点击按钮开始随机抽取奖品,当停止那刻停留在大屏幕的是抽中的奖品("谢谢"即为没奖). 2.思路: 众所周知,抽奖主要讲究的就是随机性,并且是在一堆奖项中抽取.那么可以锁定方向:用数组放奖项名,用Math.random()来返回介于 0(包含) ~ 1(不包含) 之间的一个随机数.只要能随机选中数组的下标,便能随机选中奖项. 话不多说,附上代码: <!DOCTYPE html> <

  • 基于Unity编写一个九宫格抽奖软件

    基于Unity编写一个九宫格抽奖软件

    目录 一.前言 二.效果图 三.案例制作 1.界面搭建 2.代码编写 3.效果演示 四.后言 一.前言 本博文标题和内容参考:基于原生JS实现H5转盘游戏 博主将改编成Unity版本. 二.效果图 三.案例制作 1.界面搭建 使用了9个图片作为奖品栏,然后一个chooseBox作为蒙版,一个StartBtn开始按钮放在中间 2.代码编写 新建脚本goLuckyDraw.cs 使用DoTween插件做动画,没有导入这个插件的下载导入一下 实现抽奖,主要有两个方面,一个是概率的设置,一个是动画 动画

随机推荐