随机点名（HTML/CSS/JS）

最新推荐文章于 2024-04-22 23:06:24 发布

aaa小葵

最新推荐文章于 2024-04-22 23:06:24 发布

阅读量849

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_74033027/article/details/128674034

版权

需求：

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

原理：

利用setInterval定时器，点击开始按钮后，利用数学方法结合数组随机生成一个数字，将该数字作为被抽中的人在数组中的序号，点击暂停后，定时器停止，得出被抽中的数组序号，将该值插入html中显示

效果图：

随机点名

代码块：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        table {
            margin-left: 10px;
            background-color: rgb(200, 250, 233);
            border-radius: 10px;
        }
        .litBox{
            text-align: center;
            margin-left: 200px;
            width: 200px;
            height: 200px;
            background-color: rgb(149, 208, 245);
            color: rgb(1, 1, 1);
            border-radius: 10px;
            font-size: 25px;
            font-weight: 800;
            font-family: 宋体;
            line-height: 200px;
        }
        .An{
            margin-left: 210px;
        }
        .left,.right{
            width: 80px;
            height: 40px;
            margin-top: 10px;
            margin-right: 10px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
        .left{
            background-color: rgb(216, 176, 211);
        }
        .right{
            background-color: rgb(182, 190, 222);
        }
    </style>

<body>
    <div class="box">
        <div class="bigBox">
            <table cellspacing="25">
                <tbody>
                    <tr>
                        <td>02010105廖玉洁</td>
                        <td>02010101王执聿</td>
                        <td>02010103骆文浩</td>
                        <td>02010104方海英</td>
                    </tr>
                    <tr>
                       <td>01000001吴昌平</td>
                       <td>02010108李舜禹</td>
                       <td>01000002张学涛</td>
                       <td>"01010103丁鸿飞</td> 
                    </tr>
                    <tr>
                        <td>02010107李炫宇</td>
                        <td>02010102梁克锦</td>
                        <td>02010110佟冠衡</td>
                        <td>02010106张震宇</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="litBox">

        </div>
        <div class="An">
            <button class="left">开始</button>
            <button class="right">暂停</button>
        </div>
    </div>
</body>

window.onload=function(){
    var arr=["02010105廖玉洁","02010101王执聿","02010103骆文浩","02010104方海英","01000001吴昌平","02010108李舜禹","01000002张学涛","01010103丁鸿飞","02010107李炫宇","02010102梁克锦","02010110佟冠衡","02010106张震宇"]
    var lbtn=document.querySelector(".left")
    var rbtn=document.querySelector(".right")
    var litBox=document.querySelector(".litBox")
    litBox.innerHTML=arr[0]
    var timer=""//获取一个计时器
    // 点击开始按钮后开启定时器
    lbtn.onclick=function(){
        timer=setInterval(() => {
            var num=Math.round(Math.random()*arr.length)
            litBox.innerHTML=arr[num]
        }, 50);
    }
    // 点击暂停按钮停止计时器
    rbtn.onclick=function(){
        clearInterval(timer)
    }
}