随机点名器

最新推荐文章于 2021-04-14 23:05:18 发布

Violet丶Evergarden

最新推荐文章于 2021-04-14 23:05:18 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/Vollerei/article/details/103721324

版权

```bash
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            margin-top: 50px;
        }
        
        #btn {
            display: block;
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            font-size: 24px;
        }
        
        .name {
            width: 100px;
            height: 100px;
            float: left;
            background-color: #00a1d6;
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 100px;
            color: #fff;
        }
        
        #span {
            display: block;
            text-align: center;
        }
        
        h1 {
            text-align: center;
        }
        
        .sum {
            width: 100px;
            height: 100px;
            float: left;
            /* background-color: #00a1d6; */
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 100px;
            color: #0f1011;
            font-weight: 700;
            background-image: url(2233_1.jpg);
        }
    </style>

</head>

<body>
    <h1>随机点名系统</h1>
    <span id="span"></span>
    <div class="box" id="box"></div>
    <input type="button" id="btn" value="抓一个小老弟" />
    <script type="text/javascript">
        //创造虚拟后台数据（自行创建，条数不限）
        var arrs = [""];

        //获取父元素
        var boxNode = document.getElementById("box");
        for (var i = 0; i < arrs.length; i++) {
            //创建新元素
            var divNode = document.createElement("div");
            //写入名字
            divNode.innerHTML = arrs[i];
            //设置class名
            divNode.className = "name";
            //绑定父节点
            boxNode.appendChild(divNode);
        }
        //点名
        //获取点名键
        var btn = document.getElementById("btn");
        //绑定方法
        btn.onclick = function() {
                if (this.value === "抓一个小老弟") {
                    //启动定时器
                    timeId = setInterval(function() {
                        //清空所有颜色
                        for (var j = 0; j < arrs.length; j++) {
                            boxNode.children[j].className = "name";
                        }
                        //随机给色
                        var random = parseInt(Math.random() * arrs.length);
                        boxNode.children[random].className = "sum";

                    }, 100);
                    this.value = "抓到了";
                } else {
                    //清除计时器
                    clearInterval(timeId);
                    this.value = "抓一个小老弟";
                }
            }
            //获取存放时间的盒子
        var spanNode = document.getElementById("span");
        //调用时间
        getTime();
        setInterval(getTime, 1000);

        function getTime() {
            var day = new Date();
            var year = day.getFullYear();
            var month = day.getMonth() + 1;
            var dat = day.getDay();
            var hours = day.getHours();
            var minitues = day.getMinutes();
            var second = day.getSeconds();
            spanNode.innerHTML = year + "-" + month + "-" + dat + " " + hours + ":" + minitues + ":" + second;
        }
    </script>
</body>

</html>

Violet丶Evergarden

关注

0
点赞
踩
0

收藏

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

```bash<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 1000px; ...
复制链接

扫一扫