<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
h3{
height: 45px;
color: white;
text-align: center;
line-height: 45px;
background-color: #6495ED;
box-shadow: 3px 3px 5px #007AFF;
}
div{
width: 500px;
height: 400px;
margin: 100px auto;
box-shadow: 3px 3px 5px #ccc;
}
div h4{
height: 50px;
padding: 10px;
text-align: center;
}
div p{
width: 70%;
height: 45px;
line-height: 45px;
text-align: center;
margin: 40px auto;
}
div p input{
display: block;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
}
div p button{
width: 120px;
height: 35px;
color: white;
border: none;
outline: none;
background-color: #008B8B;
}
div p input,div p button{
border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;
}
</style>
</head>
<body>
<h3>TongBaiShan's name-list</h3>
<div>
<h4>name-list</h4>
<p><input type="text"></p>
<p><button onclick="show()">Start</button></p>
</div>
<script type="text/javascript">
let nameNode = document.getElementsByTagName("input")[0];
let btnNode = document.getElementsByTagName("button")[0];
let nameArray = ['石坤坤',"何沛文","杨晨玙","王晨阳","张小豪","李鑫","丁铭扬","谢一飞"];
//定时器变量
let timer = null;
//设置默认值
nameNode.value = nameArray[0];
function show(){
if(timer == null){
btnNode.innerHTML = "Stop";
btnNode.style.color = "red";
start();
return;
}
btnNode.style.color = "white";
btnNode.innerHTML = "Start";
stop();
}
//开启点名器
function start(){
//生成随机下标
let index = Math.floor(Math.random()*nameArray.length);
//根据下标拿到对应的名字
let name = nameArray[index];
//将名字在页面显示出来
nameNode.value = name;
//重复上述动作
timer = setTimeout(start,15);
}
//关闭定时器
function stop(){
clearTimeout(timer);
timer = null;
}
</script>
</body>
</html>
点名器
最新推荐文章于 2022-04-19 10:25:42 发布