随机点名效果

最新推荐文章于 2023-06-09 16:49:45 发布

zrzzzzzzzzzzzz

最新推荐文章于 2023-06-09 16:49:45 发布

阅读量51

点赞数

文章标签： java

本文链接：https://blog.csdn.net/zrzzzzzzzzzzzz/article/details/124407157

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
width: 200px;
height: 60px;
border: 5px solid hotpink;
text-align: center;
line-height: 60px;
}
button {
width: 210px;
height: 30px;
text-align: center;
line-height: 30px;
}
</style>
<body>
<div>开始点名！</div>
<button>随机点名</button>
<script>
let box = document.querySelector('div');
let btn = document.querySelector('button');
function getRandom(min,max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let flag=1;
let arr = ['张三','李四','王五','刘二'];
let ste;
btn.addEventListener('click', function() {
if(flag) {
btn.innerHTML = '暂停';
flag = 0;
ste = setInterval(function () {
box.innerHTML = arr[getRandom(0, 3)];
}, 100);
}
else
{
btn.innerHTML = '开始点名!';
flag=1;
clearInterval(ste);
}
});
</script>
</body>
</html>

zrzzzzzzzzzzzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随机点名效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div { width: 200px; height: 60px; border: 5px solid hotpink; text-align: center;...
复制链接

扫一扫