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中几种去掉字串左右空格的方法
Dec 25 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
AngularJS表单验证功能分析
May 26 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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解决约瑟夫环算法实例分析
2019/09/30 PHP
解决laravel session失效的问题
2019/10/14 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python集合能干吗
2020/07/19 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
django跳转页面传参的实现
2020/09/17 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
党员组织关系介绍信
2014/02/13 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
天坛导游词
2015/02/02 职场文书
库房管理员岗位职责
2015/02/12 职场文书
党支部鉴定意见
2015/06/02 职场文书
党小组鉴定意见
2015/06/02 职场文书
监守自盗观后感
2015/06/10 职场文书