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 的数字 通过该数字作为数组的下标来获取到divlet 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复习九宫格抽奖相关推荐

java 9宫格抽奖_原生JS实现九宫格抽奖
本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下上代码: 谢谢惠顾十万元现金谢谢惠顾 iphone11 抽奖美的冰箱谢谢惠顾 50元红包谢谢惠顾 CSS样式代码: ...
js实现九宫格抽奖功能
分享一下js的九宫格抽奖功能首先是html部分: <div class="box"><div class="div2">短裙</ ...
原生js实现九宫格抽奖
预览效果完整代码留意注释文字的解释.记得更换图片. <!DOCTYPE html> <html> <head> <meta name="view ...
原生js 实现九宫格抽奖功能
1.先绘制一个九宫格轮盘 <div class="bodydom"><div class="block">鸿蒙紫气*1</div& ...
html九宫格抽奖视频,原生JS实现九宫格抽奖效果
效果图: 代码如下: *{margin:0;padding:0;} #container{width:310px;height:310px;margin:30px auto;} #ul1{width: ...
html+抽奖游戏,九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
java 9宫格抽奖_九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
微信html抽奖转盘代码,使用CSS3+jquery.js 实现微信抽奖转盘效果
最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 "CSS3"! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖jquery的动画效果插件, ...
JS + CSS 做一个简易九宫格抽奖
目录 1.CSS样式 2.JS动作大概做出来就是这个样子,alert的弹窗样式我也没改,就默认的. 1.CSS样式样式大概分以下方面: 创建外框及内框样式: 8个奖品小方格和中间按钮小方格: 奖品 ...

JS复习九宫格抽奖

JS复习九宫格抽奖相关推荐

最新文章

热门文章

JS复习 九宫格抽奖

JS复习 九宫格抽奖相关推荐

最新文章

热门文章

JS复习九宫格抽奖

JS复习九宫格抽奖相关推荐