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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 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遍历树的常用方法汇总
2015/06/18 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python中方法链的使用方法
2016/02/23 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
计算机网络专业求职信
2014/06/05 职场文书
文明单位创建材料
2014/12/24 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
作文之亲情600字
2019/09/23 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python