JS实现简单的九宫格抽奖


Posted in Javascript onJune 28, 2022

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

效果

JS实现简单的九宫格抽奖

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。


Tags in this post...

Javascript 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
JS实现九宫格拼图游戏
JavaScript实现九宫格拖拽效果
JS实现简单九宫格抽奖
Jun 28 #Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 #Javascript
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
小程序自定义轮播图圆点组件
Jun 25 #Javascript
You might like
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
不安全的常用的js写法
2009/09/15 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
python映射列表实例分析
2015/01/26 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
在Python中处理XML的教程
2015/04/29 Python
python机器学习之随机森林(七)
2018/03/26 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
django序列化serializers过程解析
2019/12/14 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
关于运动会的口号
2014/06/07 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
Python访问Redis的详细操作
2021/06/26 Python