内容
分为上下两个部分,上方为显示区域,下方为控制区域。显示区域显示基地所有成员的工号和姓名,控制区域由开始和结束两个按钮组成。点击开始按钮,显示区域里的内容开始滚动,点击结束按钮,内容滚动停止,随机显示一位成员的工号和姓名。
实验原理
定时器使名册位置不断滚动
点击按钮开启关闭计时器
html
<!DOCTYPE html>
<html lang="zh-CN">
<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>demo7</title>
<link rel="stylesheet" href="./css/demo7.css">
</head>
<body>
<div id="app">
<div class="chol">→</div>
<div class="chor">←</div>
<ul class="content" style="top: 0;">
<li>02010101 王执聿</li>
<li>02010102 梁克锦</li>
<li>02010103 骆文浩</li>
<li>02010104 方海英</li>
<li>02010105 廖玉洁</li>
<li>02010106 张震宇</li>
<li>02010107 李炫宇</li>
<li>02010108 李舜禹</li>
<li>02010109 李建民</li>
<li>02010110 佟冠衡</li>
<li>02010111 李奥</li>
<li>02010112 颜宏鑫</li>
<li>02010113 卢盛泽</li>
<li>02010114 鲁飞洋</li>
<li>02010115 李俊达</li>
<li>02010116 李成基</li>
<li>02010117 金昊</li>
<li>02010118 宋文邦</li>
<li>02010119 张家浩</li>
<li>02010120 王昊健</li>
<li>02010121 张圳</li>
<li>02010122 谢梓凡</li>
<li>02010123 程义博</li>
<li>02010124 程佳聪</li>
<li>02010125 马德华</li>
<li>02010126 郑稍露</li>
<li>02010127 王立航</li>
<li>02010128 李正鸿</li>
<li>02010129 张诗卉</li>
<li>02010130 马天平</li>
<li>02010131 黄磊</li>
<li>02010132 胡坤</li>
<li>02010101 王执聿</li>
<li>02010102 梁克锦</li>
<li>02010103 骆文浩</li>
<li>02010104 方海英</li>
<li>02010105 廖玉洁</li>
<li>02010106 张震宇</li>
<li>02010107 李炫宇</li>
</ul>
</div>
<div id="ctr">
<button class="sta">开始</button>
<button class="ove" disabled>结束</button>
</div>
<script src="./js/demo7.js"></script>
</body>
</html>
js
<script>
var sta=document.getElementsByClassName("sta")[0];
var ove=document.getElementsByClassName("ove")[0];
var timer;
sta.onclick=function(){
var tp=document.getElementsByClassName("content")[0];
//名册滚动
timer=setInterval(function(){
var tpnum=parseInt(tp.style.top);
if(tpnum===-1600){
tp.style.top=`0px`;
}else{
tp.style.top=`${tpnum-10}px`;
}
},10)
//开始按钮关闭
sta.disabled=true;
//结束按钮开启
ove.disabled=false;
}
ove.onclick=function(){
var tp=document.getElementsByClassName("content")[0];
var tpnum=parseInt(tp.style.top);
clearInterval(timer);
//开始按钮开启
sta.disabled=false;
//结束按钮关闭
ove.disabled=true;
//当选中框偏离时复位
if(tpnum%50!==0){
tp.style.top=`${tpnum-tpnum%50}px`;
}
}
</script>
css
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#app{
width: 200px;
height: 350px;
background-color: gray;
overflow: hidden;
position: relative;
}
#app .chol{
width: 24px;
height: 50px;
background-color: red;
line-height: 50px;
position: absolute;
top: 150px;
left: 0;
}
#app .chor{
width: 24px;
height: 50px;
background-color: red;
line-height: 50px;
position: absolute;
top: 150px;
right: 0;
}
#app .content{
width: 150px;
height: 350px;
position: absolute;
left: 25px;
}
#app .content li{
background-color: antiquewhite;
width: 148px;
height: 48px;
border: 1px solid black;
text-align: center;
line-height: 48px;
}
#ctr{
width: 200px;
height: 50px;
background-color: yellow;
text-align: center;
line-height: 50px;
}
#ctr button{
width: 60px;
height: 24px;
margin-right: 20px;
}
</style>
样式
随机点名