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 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
js动态设置div的值下例子
Oct 29 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
JavaScript实现弹出窗口效果
Dec 09 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
Python内置函数之filter map reduce介绍
2014/11/30 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python切换pip安装源的方法详解
2016/11/18 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
python 实现Harris角点检测算法
2020/12/11 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
大学毕业感言一句话
2014/02/06 职场文书
卫生标语大全
2014/06/21 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
研究生导师推荐信
2015/03/25 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
Oracle表空间与权限的深入讲解
2021/11/17 Oracle