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 相关文章推荐
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
vue-router的两种模式的区别
May 30 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
php生成缩略图的类代码
2008/10/02 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
来自phpguru得Php Cache类源码
2010/04/15 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
浅谈vue 单文件探索
2018/09/05 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python轻松实现代码编码格式转换
2015/03/26 Python
python提取页面内url列表的方法
2015/05/25 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
init进程的作用
2012/04/12 面试题
上班睡觉检讨书
2014/01/09 职场文书
党校学习心得体会范文
2014/09/09 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
项目战略合作意向书
2015/05/08 职场文书
六年级情感作文之500字
2019/10/23 职场文书