点击开始按钮开始抽奖，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>
上面就是结果啦！
这个记录下来为了方便以后使用的方便，也希望大佬们多多交流，多多留言，指出我的不足的之处啦！
原文地址：https://blog.csdn.net/A20201130
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。