随机点名~_随机点名csdn-CSDN博客

本文链接：https://blog.csdn.net/ZiminLi/article/details/128687612

demo

内容
实验原理
html
js
css
样式

内容

分为上下两个部分，上方为显示区域，下方为控制区域。显示区域显示基地所有成员的工号和姓名，控制区域由开始和结束两个按钮组成。点击开始按钮，显示区域里的内容开始滚动，点击结束按钮，内容滚动停止，随机显示一位成员的工号和姓名。

实验原理

定时器使名册位置不断滚动
点击按钮开启关闭计时器

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>

样式

随机点名