代码编织梦想

要求

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

原理

计时器计数然后清空

<!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>

随机点名

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/BBsix666/article/details/128719506

随机点名 名字_阿狸lyinshaofeng的博客-爱代码爱编程

<head>         <meta charset="utf-8">         <title></title>         <style>             h1{                 width: 500px;                 text-alig