抽奖

最新推荐文章于 2022-11-10 22:01:19 发布

TheZing

最新推荐文章于 2022-11-10 22:01:19 发布

阅读量153

点赞数

分类专栏： JavaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/jingoat/article/details/78682382

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>