分享一个用JS实现的简单点名系统

最新推荐文章于 2023-05-24 22:06:37 发布

悠闲的小刘

最新推荐文章于 2023-05-24 22:06:37 发布

阅读量216

点赞数 1

本文链接：https://blog.csdn.net/weixin_53122412/article/details/117780240

版权

效果图

代码如下（示例）：

<!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>
        .cor {
            background-color: #6083cd;
        }

        #box {
            width: 500px;
            border: 2px solid black;
            margin: 0 auto;
            height: 500px;
        }

        ul {
            list-style: none;
        }

        li {
            width: 50px;
            height: 50px;
            margin: 20px;
            float: left;
            line-height: 50px;
            text-align: center;
        }

        .center {
            width: 156px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
        }

        #pp {
            display: block;
            text-align: center;
            margin-top: 40px;
            font-size: 35px;

        }
    </style>
</head>

<body>
    <div id="box">
        <h1 style="text-align:center">点名系统</h1>
        <div class="center">
            <input type="button" value="开始点名" id="btn">
            <input type="button" value="停止点名" id="btn2">
        </div>
        <span id="pp"></span>
        <div id="dv">
        </div>
    </div>
    <script>
        function my$(id) {
            return document.getElementById(id);
        }
        var arr = ["aa", "bb", "cc", "dd", "ee", "ff", "jj", "hh", "rr", "gg", "kk", "ll", "mm"];
        var oul = document.createElement("ul");
        my$("dv").appendChild(oul);
        for (var i = 0; i < arr.length; i++) {
            oli = document.createElement("li");
            oul.appendChild(oli);
            oli.innerHTML = arr[i];
        }
        var oli = oul.getElementsByTagName("li");
        var timer;
        my$("btn").onclick = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                var num = parseInt(Math.random() * arr.length);
                console.log(num);
                for (var i = 0; i < oli.length; i++) {
                    oli[i].className = "";
                }
                oli[num].className = "cor";
                my$("pp").innerHTML = arr[num];
            }, 100);
        }
        my$("btn2").onclick = function () {
            clearInterval(timer);
        }
    </script>
</body>

</html>

悠闲的小刘

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享一个用JS实现的简单点名系统

<!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>D.
复制链接

扫一扫