用css实现的抽奖特效,可以直接复制看效果哟,快来试试吧!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button{color:red;
font-size: 40px;
margin-left: 50px;}
#aa{
width:316px;
height: 316px;
/* border: 1px solid red; */
}
#aa>div{
width:100px;
height: 100px;
border: 1px solid rgb(252, 19, 19);
text-align:center;
float: left;
background-color: rgb(204, 200, 200);
font-size: 50px;
}
div{
line-height: 100px;
}
div:nth-child(5){
background-color:rgb(241, 131, 6)
}
</style>
</head>
<body>
<div id="aa">
<div class="nn">1</div>
<div class="nn">2</div>
<div class="nn">3</div>
<div class="nn">4</div>
<div class="nn">5</div>
<div class="nn">6</div>
<div class="nn">7</div>
<div class="nn">8</div>
<div class="nn">9</div>
</div>
<br>
<button>开始抽奖</button>
</body>
<script>
var button=document.querySelector("button");
var div=document.getElementsByClassName("nn")
button.addEventListener("click",function(){
var zhang=setInterval(function(){
var color=['red','blue','yellow','gray','aqua','rebeccapurple',
'salmon','royalblue','red'];
var a=Math.round(Math.random()*(8-0)+0);
for(var i=0;i<div.length;i++)
{
div[i].style.backgroundColor='rgb(204, 200, 200)';
}
div[a].style.backgroundColor=color[a];
},100);
setTimeout(function(){
clearInterval(zhang);
},2000);
})
</script>
</html>