需求:
分为上下两个部分,上方为显示区域,下方为控制区域。显示区域显示基地所有成员的工号和姓名,控制区域由开始和结束两个按钮组成。点击开始按钮,显示区域里的内容开始滚动,点击结束按钮,内容滚动停止,随机显示一位成员的工号和姓名。
实现原理:
1、给开始按钮绑定随机点名事件,停止按钮绑定随机点名的解除事件
2、通过将成员装进数组内,取随机数后,将随机数赋予数组下标实现成员随机点名。
3、设置间隔计时器实现随机数的更新
4、通过给随机点名取得的标签设置类名,css中设置相应类名不同的样式,实现滚动效果
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
border-bottom: 1px solid rgb(165, 161, 161);
margin:auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#btns{
border: none;
}
button{
width: 50px;
height: 30px;
margin: 10px 100px;
border: none;
border-radius: 10px;
background-color: rgb(54, 142, 177);
color: white;
cursor: pointer;
}
p{
margin: 20px;
width: 80px;
height: 50px;
border: none;
background-color: rgb(102, 166, 196);
text-align:center;
}
.active{
background-color: rgb(219, 137, 61);
}
</style>
</head>
<body>
<div id="names"></div>
<div id="btns"></div>
<script>
var names=document.getElementById("names")
//成员数组
var menbers=["01000001吴昌平","01000002张学涛","02020002杨世成","01010002周思佟","01010103丁鸿飞","01020001张雨菡","02020001唐雨欣","02010126郑稍露","01010105谭耀","01010106高维磊","01010107王荠","01010209蒋嘉麒","01020003杨嘉宁","01030001张雪","02010101王执聿","02010106张震宇","02010107李炫宇","02010108李舜禹","02010110佟冠衡","02010111李奥","02010112颜宏鑫","02010116李成基","02010118宋文邦","02010120王昊健","02010122谢梓凡","02010127王立航","02010129张诗卉","02010131黄磊","02010201郭慧通","02010201郭慧通","02010301凌欣萍","02010302田歆妍","02020110陈妍稀","01010102丁礼涛","01010109高书贤","01010112苏子豪","01010119徐靖卓","01010116王曦婵","01010122丁仁磊","01010101朱金涛","02010109李建民",
"02010105廖玉洁","01010110刘奔","02010104方海英","02010115李俊达","02010114鲁飞洋","02010117金昊","02010123程义博","02010130马天平","02010401吴明浩","02020104张雨晴"]
//创建html节点并将成员数组信息赋予节点
for(var i=0;i<menbers.length;i++){
var menber=document.createElement("p")
menber.innerHTML=`${menbers[i]}`
$("#names").append(menber)
}
console.log()
//设置开始与停止按钮
var start=document.createElement("button")
$("#btns").append(start)
start.innerHTML="开始"
var end=document.createElement("button")
$("#btns").append(end)
end.innerHTML="停止"
//点击事件函数
var handler=function(){
//取HTML中的成员标签
var p=document.getElementsByTagName("P")
//设置间隔计时器,更新随机点名名单
var time=setInterval
(function(){
//取一个随机数
var staff=Math.floor(Math.random()*(menbers.length+1))
console.log(staff)
//取出p标签的所有active类名
for(var i=0;i<menbers.length;i++){
p[i].classList.remove("active")
}
//为随机成员赋予active类名
p[staff].classList.add("active")
},200)
//点击end键停止计时器停止更新随机点名
end.addEventListener("click",function(){
clearInterval(time)
})
}
//为start键绑定事件
start.addEventListener("click",handler)
</script>
</body>
</html>
效果:
[video(video-fMq5WV86-1673788591320)(type-csdn)(url-https://live.csdn.net/v/embed/270342)(image-https://video-community.csdnimg.cn/vod-84deb4/164399a094d471ed909b6733a78e0102/snapshots/c7cfd243d4024e4cb1836ac85bbd7e31-00001.jpg?auth_key=4827387420-0-0-baff659eaf3155180aa5eddb8450bdd1)(title-实现效果]