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 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
vue一步步实现alert功能
Jul 05 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
详解vue组件之间的通信
Aug 30 Javascript
js实现碰撞检测
Jan 29 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
星际实力自我测试
2020/03/04 星际争霸
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
angular 内存溢出的问题解决
2018/07/12 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
总结4个方面优化Vue项目
2019/02/11 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
利用python计算时间差(返回天数)
2019/09/07 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Django静态文件加载失败解决方案
2020/08/26 Python
自动化专业个人求职信范文
2013/11/29 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
运输服务质量承诺书
2014/03/27 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
2015年体育部工作总结
2015/04/02 职场文书
舞出我人生观后感
2015/06/16 职场文书
超市店长竞聘书
2015/09/15 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
如何利用pygame实现打飞机小游戏
2021/05/30 Python
Java实现简易的分词器功能
2021/06/15 Java/Android
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技