原生js 实现九宫格抽奖功能

1.先绘制一个九宫格轮盘

<div class="bodydom"><div class="block">鸿蒙紫气*1</div><div class="block">现金百万*1</div><div class="block">复活戒指*1</div><div class="block">谢谢参与</div><div class="block5 block"><div><div>开始抽奖</div><div class='frequency'>剩余<span id='numbers'>3</span>次</div></div></div><div class="block">九阳真经*1</div><div class="block">宇宙战舰*1</div><div class="block">世界树*1</div><div class="block">神秘大奖</div>
</div>
<div id='prize' style='prize'></div>

2.添加css

<style>.bodydom {width: 600px;height: 600px;border: 1px solid;display: flex;flex-wrap: wrap;background-color: #F56C6C;border-radius: 10px;}.block {width: 25%;height: 25%;border: 1px solid black;text-align: center;font-size: 20px;margin: 4%;display: flex;align-items: center;justify-content: center;border-radius: 10px;background-color: pink;}.block5 {background-color: #409EFF;cursor: pointer;}.frequency{font-size:15px}.prize{font-size: 25px;margin-top: 10px;}</style>

3.最重要的js代码

<script>let blocks = document.getElementsByClassName("block");let list = [0, 1, 2, 5, 8, 7, 6, 3], i = 0, count = 0, stopTimer;  //list存放数组的下标，i为下标值，默认从下标为0的开始，也就是左上角的高档洋房一套，count用于判断是否与随机数相等每次加一let randomn = Math.floor(Math.random() * 8 + 50); // 创建随机数随机数 let timing = function () {// 将其他盒子都变为粉色for (let j = 0; j < list.length; j++) {blocks[list[j]].style.background = "pink";}blocks[list[i]].style.background = "white";i++; // 重制i的值if (i === list.length) {i = 0;}//randomn的值最大为58，最小为50count++; // 根据count的值调整速度// 下面的4个if根据count的值来关闭计时器和重启计时器 改变计时器的时间间隔if (count === 5 || count === 45) {clearInterval(stopTimer);stopTimer = setInterval(timing, 200);}if (count === 10 || count === 35) {clearInterval(stopTimer);stopTimer = setInterval(timing, 100);}if (count === 15) {clearInterval(stopTimer);stopTimer = setInterval(timing, 50);}// 当等于上面的随机数时，停止计时器if (count === randomn) {clearInterval(stopTimer);var tips=blocks[list[i-1]].innerTextif(i-1!=6){document.getElementById("prize").innerHTML='恭喜您获得'+tips}else{document.getElementById("prize").innerHTML='不要灰心，再接再厉！'}count = 0  //重置count 的值let randomn = Math.floor(Math.random() * 8 + 50); // 重新获取随机数blocks[4].addEventListener("click", start);//重新绑定点击事件}}// 点击开始按钮后 点击后执行 timing let start = function () {blocks[4].removeEventListener("click", start); // 当点击了开始按钮后 移除点击事件 防止用户重复点击var numbers=document.getElementById("numbers").innerHTMLif(numbers==0){alert('抱歉，您没有抽奖次数！')}else{numbers--document.getElementById("numbers").innerHTML=numbersstopTimer = setInterval(timing, 300);}console.log(numbers)}blocks[4].addEventListener("click", start);  //下标为4的绑定点击事件，也就是开始抽奖</script>

效果图

问题：以上代码用随机数控制的，不能自己控制自己想要抽到的东西，简单的改一下就行了

喜欢的话，欢迎交流哦

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

js实现九宫格抽奖功能
分享一下js的九宫格抽奖功能首先是html部分: <div class="box"><div class="div2">短裙</ ...
java 9宫格抽奖_原生JS实现九宫格抽奖
本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下上代码: 谢谢惠顾十万元现金谢谢惠顾 iphone11 抽奖美的冰箱谢谢惠顾 50元红包谢谢惠顾 CSS样式代码: ...
原生js实现九宫格抽奖
预览效果完整代码留意注释文字的解释.记得更换图片. <!DOCTYPE html> <html> <head> <meta name="view ...
html九宫格抽奖视频,原生JS实现九宫格抽奖效果
效果图: 代码如下: *{margin:0;padding:0;} #container{width:310px;height:310px;margin:30px auto;} #ul1{width: ...
使用vue实现九宫格抽奖功能
使用vue2和vue3分别实现九宫格抽奖功能关于九宫格抽奖的功能,想必大家都见过.外圈为奖品,中间是一个抽奖的按钮,接下来就讲解怎么实现九宫格的抽奖功能. 本demo使用技术:vue2/vue3,作 ...
“淘宝小程序“ 九宫格抽奖功能
淘宝小程序的九宫格抽奖功能,同理功能代码可根据指定小程序规则调整事件,此逻辑可适配所有小程序功能开发. 效果图: index.axml  <view cl ...
简易灯箱画廊设计html,原生Js实现的画廊功能
原生Js实现画廊功能,点击图片,在下方出现相应放大图片.给a标签绑定onclick点击事件.这里上方的小图和下方将要展示大图,都是同一张图片,只是上下两个img的style中设置了不同的width和h ...
java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
原生js调用手机拍照功能
原生js调用手机拍照功能此功能主要用于混合App开发时手机拍照上传图片的功能! 话不多说直接上代码! 注:此代码在浏览器中运行时会报错,必须打开调试功能在手机上运行才可以! // html部分 // ...

原生js 实现九宫格抽奖功能

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

最新文章

热门文章