要求
分为上下两个部分,上方为显示区域,下方为控制区域。显示区域显示基地所有成员的工号和姓名,控制区域由开始和结束两个按钮组成。点击开始按钮,显示区域里的内容开始滚动,点击结束按钮,内容滚动停止,随机显示一位成员的工号和姓名。
原理
计时器计数然后清空
<!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>
.name{
display: flex;
justify-content: center;
}
.xiaoname{
margin: 0 30px;
}
.see{
display: flex;
justify-content: center;
}
.xiaosee{
margin-top: 40px;
width: 160px;
height: 120px;
background-color: rgba(62, 163, 214, 0.6);
display: flex;
justify-content: center;
}
.anniu{
margin-top: 40px;
display: flex;
justify-content: center;
}
.kong{
width: 40px;
}
</style>
</head>
<body>
<div class="name" >
<div class="xiaoname">李</div>
<div class="xiaoname">俊</div>
<div class="xiaoname">达</div>
<div class="xiaoname">小李</div>
<div class="xiaoname">小俊</div>
<div class="xiaoname">小达</div>
</div>
<div class="see"><div class="xiaosee"></div></div>
<div class="anniu">
<div class="start">开始</div>
<div class="kong"></div>
<div class="stop">停</div>
</div>
<script>
window.onload=function(){
var arr=["李","俊","达","小李","小俊","小达"]
var start=document.querySelector(".start")
var stop=document.querySelector(".stop")
var xiaosee=document.querySelector(".xiaosee")
xiaosee.innerHTML=arr[0]
var ARR = arr.length -1
var timer=""
start.onclick=function(){
timer=setInterval(() => {
var num=Math.round(Math.random()*ARR)
xiaosee.innerHTML=arr[num]
}, 100);
}
stop.onclick=function(){
clearInterval(timer)
}}
</script>
</body>
</html>
随机点名