JS实现简单的九宫格抽奖
更新时间：2022年06月28日 16:43:18 作者：千北kk
这篇文章主要为大家详细介绍了JS实现简单的九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
window.addEventListener是JavaScript中用于添加事件监听器的方法,允许在发生特定事件时执行函数,本文给大家介绍js window.addEventListener 是什么,感兴趣的朋友一起看看吧2024-09-09
在服务器端的单元测试中，都有各种各样的测试框架，在JavaScript中现在也有一些很优秀的框架，但在本文中，我们将自己动手一步步来实现一个简单的单元测试框架2012-04-04
这篇文章主要为大家详细介绍了javascript表单正则应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了JS实现点击掉落特效,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
JQuery 进行跨域请求实现代码，需要的朋友可以参考下。2010-01-01
当js获取这三种样式时,style只能获取内联样式，获取不到外部样式和嵌入式样式,因此要用currentStyle属性，而currentStyle在FF下不支持2009-08-08
本文主要介绍了js实现日历与定时器的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
ko的动态属性是指，ViewModel不确定的属性，而后期却需要的属性,本文将详细介绍，需要的朋友参考下2012-11-11
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
这篇文章主要介绍了Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要介绍了js中构造流程图的核心技术JsPlumb，jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，需要的朋友可以参考下2015-12-12
最新评论