准备一个数组,里面添加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 timerfunction 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>