简易随机点名

最新推荐文章于 2022-11-13 14:21:49 发布

qq_35680499

最新推荐文章于 2022-11-13 14:21:49 发布

阅读量380

点赞数

本文链接：https://blog.csdn.net/qq_35680499/article/details/82468368

版权

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        html {
            height: 100%;
        }

        body {
            padding: 0;
            margin: 0;
            background: url(../img/login.jpg) no-repeat;
            background-size: 100% 100%;
        }


        .box {
            width: 100%;
            height: 240px;
            margin: 0 auto;
            margin-top: 100px;
        }

        #btn {
            width: 100px;
            height: 30px;
            margin-left: 600px;
            margin-top: 50px;
        }

        .name {
            width: 100px;
            height: 30px;
            border-radius: 50px;
            float: left;
            background-color: antiquewhite;
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 30px;
        }


        h3 {
            text-align: center;
            font: "仿宋";
        }

    </style>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/Login.css" />
</head>

<body>
    <h3>简易随机点名(点击回车开始，再次点击停止)</h3>
    <span id="span"></span>
    <div class="box" id="box"></div>
    <script type="text/javascript">
        //创造虚拟后台数据
        var arrs = ["1", "2", "3", "4", "5", "6", "7", "8",
            "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"
        ];
        //获取父元素
        var boxNode = document.getElementById("box");
        for(var i = 0; i < arrs.length; i++) {
            //创建新元素
            var divNode = document.createElement("div");
            divNode.innerHTML = arrs[i];
            divNode.className = "name col-md-1 ";
            boxNode.appendChild(divNode);
        }
        //点名
        var flag = 0;
        document.onkeydown = function(event) {
            var e = event || window.event;
            if(e && e.keyCode == 13) { //回车键的键值为13
                if(flag > 1) {
                    flag = 0;
                }
                if(flag == 0) {

                    //定时
                    timeId = setInterval(function() {
                        //清空所有颜色
                        for(var j = 0; j < arrs.length; j++) {
                            boxNode.children[j].style.background = "";
                        }

                        var random = parseInt(Math.random() * arrs.length);
                        boxNode.children[random].style.background = "#A6E1EC";
                    }, 100);

                }
                if(flag == 1) {
                    clearInterval(timeId)
                }
                flag++
            }
        };
    </script>
</body>

qq_35680499

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简易随机点名

&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; html { height: 100%; } body { padding: 0; ...
复制链接

扫一扫