JS实现随机抽奖功能

点击开始按钮开始抽奖，div依次变红！下面是js代码，需要的自取

   <script>var but1 = document.getElementById("btn1")var but2 = document.getElementById("btn2")var alldiv = document.querySelectorAll(".father>div")console.log(alldiv);var index = 0;var flag = 0;but1.onclick=function(){if(flag == 0){t = setInterval(()=>{index= index>=(alldiv.length-1)?0:++index;alldiv[index].style.backgroundColor = "gold";if(index !=0){alldiv[index-1].style.backgroundColor = "#fff";}else if(index==0){alldiv[19].style.backgroundColor = "#fff";}//  alldiv[index].style.backgroundColor = "red";console.log(index)},1)flag = 1;}but2.onclick=function(){clearInterval(t);flag = 0;}}</script>

下面是html，css代码

style>.father{width: 600px;height: 600px;/* border: 1px solid darkorchid; */position: relative;margin: 20px auto;}input{width: 100px;height: 100px;}.son1{width: 100px;height: 100px;position: absolute;top: 0;left: 0;border: 1px solid brown;text-align: center;line-height: 100px;}.son2{width: 100px;height: 100px;position: absolute;top: 0;left: 100px;border: 1px solid brown;text-align: center;line-height: 100px;}.son3{width: 100px;height: 100px;position: absolute;top: 0;left: 200px;border: 1px solid brown;text-align: center;line-height: 100px;}.son4{width: 100px;height: 100px;position: absolute;top: 0;left: 300px;border: 1px solid brown;text-align: center;line-height: 100px;}.son5{width: 100px;height: 100px;position: absolute;top: 0;left: 400px;border: 1px solid brown;text-align: center;line-height: 100px;}.son6{width: 100px;height: 100px;position: absolute;top: 0;left: 500px;border: 1px solid brown;text-align: center;line-height: 100px;}.son7{width: 100px;height: 100px;position: absolute;top: 100px;right: -2px;border: 1px solid brown;text-align: center;line-height: 100px;}.son8{width: 100px;height: 100px;position: absolute;top: 200px;right: -2px;border: 1px solid brown;text-align: center;line-height: 100px;}.son9{width: 100px;height: 100px;position: absolute;top: 300px;right: -2px;border: 1px solid brown;text-align: center;line-height: 100px;}.son10{width: 100px;height: 100px;position: absolute;top: 400px;right: -2px;border: 1px solid brown;text-align: center;line-height: 100px;}.son11{width: 100px;height: 100px;position: absolute;top: 500px;right: -2px;border: 1px solid brown;text-align: center;line-height: 100px;}.son12{width: 100px;height: 100px;position: absolute;bottom: -2px;right: 100px;border: 1px solid brown;text-align: center;line-height: 100px;}.son13{width: 100px;height: 100px;position: absolute;bottom: -2px;right: 200px;border: 1px solid brown;text-align: center;line-height: 100px;}.son14{width: 100px;height: 100px;position: absolute;bottom: -2px;right: 300px;border: 1px solid brown;text-align: center;line-height: 100px;}.son15{width: 100px;height: 100px;position: absolute;bottom: -2px;right: 400px;border: 1px solid brown;text-align: center;line-height: 100px;}.son16{width: 100px;height: 100px;position: absolute;bottom: -2px;right: 500px;border: 1px solid brown;text-align: center;line-height: 100px;}.son17{width: 100px;height: 100px;position: absolute;bottom: 98px;right: 500px;border: 1px solid brown;text-align: center;line-height: 100px;}.son18{width: 100px;height: 100px;position: absolute;bottom: 198px;right: 500px;border: 1px solid brown;text-align: center;line-height: 100px;}.son19{width: 100px;height: 100px;position: absolute;bottom: 298px;right: 500px;border: 1px solid brown;text-align: center;line-height: 100px;}.son20{width: 100px;height: 100px;position: absolute;bottom: 398px;right: 500px;border: 1px solid brown;text-align: center;line-height: 100px;}#btn1{position:absolute;top: 250px;left: 200px;}#btn2{position:absolute;top: 250px;left: 300px;}
</style>
<body><div class="father"><input type="button" value="开始" id="btn1"><input type="button" value="停止" id="btn2"><div class="son1">1</div><div class="son2">2</div><div class="son3">3</div><div class="son4">4</div><div class="son5">5</div><div class="son6">6</div><div class="son7">7</div><div class="son8">8</div><div class="son9">9</div><div class="son10">10</div><div class="son11">11</div><div class="son12">12</div><div class="son13">13</div><div class="son14">14</div><div class="son15">15</div><div class="son16">16</div><div class="son17">17</div><div class="son18">18</div><div class="son19">19</div><div class="son20" >20</div></div>

上面就是结果啦！

这个记录下来为了方便以后使用的方便，也希望大佬们多多交流，多多留言，指出我的不足的之处啦！

有需要的小伙伴可以研究研究啦！！

JS实现随机抽奖功能相关推荐

php js抽奖,JS做出随机抽奖系统
这次给大家带来JS做出随机抽奖系统,JS做出随机抽奖系统的注意事项有哪些,下面就是实战案例,一起来看一下. 用JavaScript实现一个简单的抽奖系统,有[开始]按钮和[停止]按钮. 功能: - 点 ...
js实现九宫格抽奖功能
分享一下js的九宫格抽奖功能首先是html部分: <div class="box"><div class="div2">短裙</ ...
Js实现轮盘抽奖功能，一招帮你解决选择困难症
不知道今天自己该吃什么,一招帮你解决选择困难症. 通过html+css+js实现一个轮盘抽奖功能.我们可以将平时吃的饭菜输入到代码中,每到纠结的时候只需点开抽一次就可以了. 实现步骤 html代码: ...
html里用js实现随机抽奖,js实现简单随机抽奖的方法
本文实例讲述了js实现简单随机抽奖的方法.分享给大家供大家参考.具体实现方法如下: js随机抽奖程序 var alldata = "a,b,c,d,e,f,g,h,i,j,k" v ...
原生JS开箱随机抽奖代码
下载地址原生JS制作开箱随机抽奖小游戏,思路比较简单,十分实用!您可以随意定制抽奖奖品,点击开启按钮,箱子筛选随机产生中奖结果弹窗提示.ps:演示内容无任何含义. dd:
matlab运用函数随机点名,js实现随机点名功能
本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下效果: PS:在原来的效果中很快的,但是不知怎么的录下来就变得这么慢了代码如下: 随机点名 .box{ width: 800 ...
用js写随机抽奖代码
<style>.title {width: 300px;height: 50px;background-color: orange;text-align: ...
利用js实现简单抽奖功能
其实这种抽奖的功能和选人是一样的.在点击开始按钮之后,标题上方的名字可以实现一个不停的变化,在点击停止之后抽出获奖的名字.在写之我们必须明确一点的是需要用到哪些方法:并且将基础的框架搭建出来: 下面是 ...
原生js 实现九宫格抽奖功能
1.先绘制一个九宫格轮盘 <div class="bodydom"><div class="block">鸿蒙紫气*1</div& ...

JS实现随机抽奖功能

点击开始按钮开始抽奖，div依次变红！下面是js代码，需要的自取

JS实现随机抽奖功能相关推荐

最新文章

热门文章