准备一个数组,里面添加10个奖品数据,让奖品数据快速的在盒子中随机显示,通过按钮控制盒子里面的内容停止。
效果图:
<!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>
*{
margin: 0;
padding: 0;
}
#box{
width: 230px;
height: 80px;
text-align: center;
border: 2px solid red;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
#btn{
width: 200px;
height: 50px;
text-align: center;
margin: 30px auto;
display: flex;
justify-content: space-between;
}
button{
width: 80px;
height: 30px;
background-color: white;
border: 1px solid rgb(0, 110, 255);
}
</style>
</head>
<body>
<div id="box">
</div>
<div id="btn">
<button onclick="start()">开始</button>
<button onclick="end()">结束</button>
</div>
<script>
var box=document.querySelector('#box')
var arr=['巧克力','键盘','筋膜枪','充电宝','瑜伽垫','电风扇','旺旺大礼包','一箱酸奶','手机','平板']
box.innerHTML=arr[0]
var timer
function start(){
if(timer){
return
}
timer=setInterval(function(){
var random=parseInt(Math.random()*10)
box.innerHTML=arr[random]
},200)
}
function end(){
console.log("结束")
clearInterval(timer)
timer=''
}
</script>
</body>
</html>