实现效果:
点击一次按钮开始抽签 再点一次停止 再点一次继续抽签
全部代码:
<!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>
body {
padding-top: 150px;
}
.box{
width: 400px;
height: 200px;
background-color: rgb(255, 240, 253);
border-radius: 40px;
text-align: center;
padding: 50px;
margin: auto;
}
h2{
background:#ffe6ff;
border-radius: 20px;
width: 90px;
height: 50px;
line-height: 50px;
margin-left: 150px;
}
</style>
</head>
<body>
<div class="box">
<h2 id="start">抽一个</h2>
<h1 id="menu">今天中午吃什么</h1>
</div>
</body>
<script>
var arr = [
'米线',
'烤包子',
'盒饭',
'砂锅',
'鸡公煲',
'黄焖鸡',
'15',
'西北风',
'刘八两板面',
'馄饨',
'蛋堡',
'羊杂面',
'熏肉大饼',
'饭包',
'寿司',
];
//获取开始的按钮
var start = document.querySelector('#start');
//获取显示文字的标题
var menu = document.querySelector('#menu');
//声明定时器
var timer = '';
//声明点击次数
var c = 1;
start.onclick = function () {
if (c % 2 == 1) {
//防抖
clearInterval(timer);
timer = setInterval(function () {
var i = Math.floor(Math.random() * arr.length);
menu.innerHTML = arr[i];
}, 12)
} else {
clearInterval(timer);
}
c++;
};
</script>
</html>