js实现九宫格抽奖功能

分享一下js的九宫格抽奖功能

首先是html部分：

<div class="box"><div class="div2">短裙</div><div class="div3">口红</div><div class="div4">草莓</div><div class="div5">西瓜</div><div class="div6">奶茶</div><div class="div7">美甲</div><div class="div8">谢谢参与</div><div class="div9">苹果13</div><strong class="button"> 点击抽奖</strong></div>

接下来是设置样式：

1. 创建div作为抽奖转盘

2. 在div内创建8个奖品，按照顺序分别定位到合适位置，九宫格，例如：
   1 2 3
   8 4
   7 6 5

3. 在div内再创建一个标签作为抽奖按钮，并定位到中间
4. 统一给奖品设置背景颜色，例如：蓝色（以下都已蓝色为默认颜色）

* {margin: 0;padding: 0;}.box {width: 340px;height: 340px;border: 1px #00FFFF solid;position: relative;margin: 100px;}.box div {width: 100px;height: 100px;background-color: royalblue;text-align: center;line-height: 100px;}.div2 {position: absolute;top: 10px;left: 10px;}.div3 {position: absolute;top: 10px;left: 120px;}.div4 {position: absolute;top: 10px;left: 230px;}.div5 {position: absolute;top: 120px;left: 230px;}.div6 {position: absolute;top: 230px;left: 230px;}.div7 {position: absolute;top: 230px;left: 120px;}.div8 {position: absolute;top: 230px;left: 10px;}.div9 {position: absolute;top: 120px;left: 10px;}.button {width: 100px;height: 100px;background-color: #62c6a3;position: absolute;text-align: center;line-height: 100px;top: 120px;left: 120px;}

最后是功能部分：

1. 获取按钮标签，并给它绑定点击事件，点击执行 eve 函数作为事件函数
2. 创建全局变量 k 初始为 0 ，表示为当前选中奖品的下标
3. 获取奖品列表，当点击后，先让第一个奖品修改背景颜色为粉色，也就是 k 下标对应的奖品

4. 创建全局变量 time 初始为 500 ，在点击事件函数内创建定时器，每隔 time 毫秒，执行 pu 函数
5. 获取奖品列表，并创建 pu 函数，在函数内判断 k 是否小于 7 (奖品的数量 - 1)
6. 如果小于7，执行 k++ 表示让当前选中的下标加一，让上一个奖品也就是 k - 1 下标对应的奖品颜色为蓝色
7. 并让当前选中的奖品也就是 k 下标对应的奖品背景颜色为粉色
8. 如果不小于7，表示 k 不能再自增了，需要重新初始为 0 ，
9. 让最后一件奖品 (奖品的数量 - 1 的下标对应的奖品)的背景颜色为蓝色，

10.让第一件奖品也就是 k 下标对应的奖品背景颜色为粉色

let button = document.getElementsByClassName('button')[0];let box = document.getElementsByClassName('box')[0];let pirze = box.getElementsByTagName('div');console.log(pirze);let k = 0;let time = 500;let count = 0;let int;let rom = 0;button.onclick = eve;function eve() {pirze[k].style.background = "pink";int = setInterval(pu, time)rom = Math.floor(Math.random() * pirze.length);button.onclick = null;}function pu() {if (k < pirze.length - 1) {k++;pirze[k - 1].style.background = "royalblue";pirze[k].style.background = "pink";} else {k = 0;count++;pirze[pirze.length - 1].style.background = "royalblue";pirze[k].style.background = "pink";}if (count <= 5) {if (time <= 100) {time = 100;} else {time -= 20;}} else {if (time >= 500) {time = 500;} else {time += 20;}}if (count > 7 && rom == k) {clearInterval(int);count = 0;rom = 0;time = 500;button.onclick = eve;let text = pirze[k].innerHTML;setTimeout(function(){alert("恭喜您获得：" + text);},300)}else{clearInterval(int);int = setInterval(pu, time)}}

以上就是本章的全部内容，感谢您的阅读。

js实现九宫格抽奖功能相关推荐

原生js 实现九宫格抽奖功能
1.先绘制一个九宫格轮盘 <div class="bodydom"><div class="block">鸿蒙紫气*1</div& ...
使用vue实现九宫格抽奖功能
使用vue2和vue3分别实现九宫格抽奖功能关于九宫格抽奖的功能,想必大家都见过.外圈为奖品,中间是一个抽奖的按钮,接下来就讲解怎么实现九宫格的抽奖功能. 本demo使用技术:vue2/vue3,作 ...
“淘宝小程序“ 九宫格抽奖功能
淘宝小程序的九宫格抽奖功能,同理功能代码可根据指定小程序规则调整事件,此逻辑可适配所有小程序功能开发. 效果图: index.axml  <view cl ...
java 9宫格抽奖_原生JS实现九宫格抽奖
本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下上代码: 谢谢惠顾十万元现金谢谢惠顾 iphone11 抽奖美的冰箱谢谢惠顾 50元红包谢谢惠顾 CSS样式代码: ...
Js实现轮盘抽奖功能，一招帮你解决选择困难症
不知道今天自己该吃什么,一招帮你解决选择困难症. 通过html+css+js实现一个轮盘抽奖功能.我们可以将平时吃的饭菜输入到代码中,每到纠结的时候只需点开抽一次就可以了. 实现步骤 html代码: ...
原生js实现九宫格抽奖
预览效果完整代码留意注释文字的解释.记得更换图片. <!DOCTYPE html> <html> <head> <meta name="view ...
利用js实现简单抽奖功能
其实这种抽奖的功能和选人是一样的.在点击开始按钮之后,标题上方的名字可以实现一个不停的变化,在点击停止之后抽出获奖的名字.在写之我们必须明确一点的是需要用到哪些方法:并且将基础的框架搭建出来: 下面是 ...
JS实现随机抽奖功能
点击开始按钮开始抽奖,div依次变红!下面是js代码,需要的自取 <script>var but1 = document.getElementById("btn1")v ...
JS复习九宫格抽奖
结构 <body><div id="fa"><div class="option">1</div><div ...

js实现九宫格抽奖功能

js实现九宫格抽奖功能相关推荐

最新文章

热门文章