抽奖

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 408px;margin: 100px auto;}
#box div{
width: 100px;height: 50px;border: 1px solid black;text-align: center;float: left;
padding-top:50px ;
}
#btn{clear: both;width: 200px;height: 50px;border-radius: 8px;margin-top: 80px;margin-left: 100px;}
</style>

<script type="text/javascript">
window.οnlοad=function(){
var btn=document.getElementById("btn");
var box=document.getElementById("box");
var divs=box.getElementsByTagName("div");
btn.οnclick=function(){
var timer1=setInterval(function(){
var rand=Math.random();
var num=Math.round(rand * 15);
for(var i=0;i<divs.length;i++){
divs[i].style.background="white";
divs[num].style.background="red";
}

},50); 
setTimeout(function(){
clearInterval(timer1);
var timer2=setInterval(function(){
var rand=Math.random();
var num=Math.round(rand * 15);
for(var i=0;i<divs.length;i++){
divs[i].style.background="white";
divs[num].style.background="red";
}

},200);
setTimeout(function(){
clearInterval(timer2);
},2000);
},3000);  

}
</script>
</head>
<body>
<div id="box">
<div>阿莹</div>
<div>1G日本小电影</div>
<div>想多了</div>
<div>小莹</div>
<div>好好学习</div>
<div>100万</div>
<div>去门口喊一声我爱你</div>
<div>小莹</div>
<div>1G欧美小电影</div>
<div>iphone x</div>
<div>想多了</div>
<div>1G国产小电影</div>
<div>莹莹</div>
<div>说句真心话</div>
<div>好好学习</div>
<div>卓莹</div>
<button id="btn">抽奖</button>
</div>



</body>
</html>

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页