<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 200px;
margin: 100px auto;
text-align: center;
border: 1px solid #999;
}
.box span {
font-size: 20px;
}
.box button {
width: 60px;
height: 30px;
margin: 30px 0px 0px 20px;
}
</style>
</head>
<body>
<div class="box">
<h3>随机点名器</h3>
<span>2019-02</span><br />
<button class="start">开始</button>
<button class="stop" disabled>停止</button>
</div>
<script>
// 获取元素
let span = document.querySelector('.box span')
const start = document.querySelector('.box .start')
const stop = document.querySelector('.box .stop')
// 定时器全局变量
let timer = 0
// 姓名随机全局变量
let random = 0
// 获取数据
const personName = ['赵钱', '孙李', '周吴', '郑王', '冯陈', '褚卫', '蒋沈', '韩杨']
// 设置按钮监听事件
// 开始
start.addEventListener('click', function () {
// 点击"开始",启用定时器,"停止"按钮false
start.disabled = true
stop.disabled = false
timer = setInterval(function () {
// 生成随机数
random = Math.floor(Math.random() * personName.length)
span.innerHTML = personName[random]
}, 100)
})
// 停止
stop.addEventListener('click', function () {
// 点击"停止",清除定时器,"开始"按钮ture
clearInterval(timer)
start.disabled = false
stop.disabled = true
})
</script>
</body>
</html>
js随机点名案例
于 2024-02-08 16:11:24 首次发布