首页 > 代码库 > 随机点名器

随机点名器

2024-08-26 07:33:10   219人阅读

该吃中饭了，那么吃完中饭谁洗碗呢，这个幸运的小伙伴就交给我们的责任重大的随机点名器决定吧。你们也可以试试哟！你洗你洗你洗......

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机洗碗点名器</title>
    <style>
        .box{
            width: 350px;
            height: 130px;
            padding: 25px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -175px;
            margin-top: -75px;
            border: 1px solid #000;
        }
        .name{
            height: 70px;
            border: 1px solid #ccc;
            text-align: center;
            font-size: 30px;
            font-weight: 700;
            line-height: 70px;
        }
        .btn{
            margin-top: 15px;
            height: 45px;
            width: 100%;
            font-size: 25px;
            outline: none;
            cursor: pointer;
            font-family: "Microsoft YaHei";
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="name" id="name">洗碗点名器</div>
        <button class="btn" id="btn" onclick="gotoRun()">开 始</button>
    </div>

    <script>
        var nameLi = [‘小朋友洗碗‘, ‘颖姐姐洗碗‘, ‘老霍洗碗‘, ‘燃哥哥洗碗‘, ‘冯姐姐洗碗‘];
        // 声明时间变量
        var timer = null;

        function gotoRun () {
            // 获取button元素
            var button = document.getElementById(‘btn‘);

            // 判断是开始还是结束
            if (timer === null) {
                // 开启定时
                timer = setInterval(getName, 100);
                // 把button的内容改掉
                button.innerHTML = "暂停";
            } else {
                clearInterval(timer);
                button.innerHTML = "开始";
                timer = null;
            }
        }
        function getName() {
            var index = Math.floor(Math.random() * nameLi.length) ;
            document.getElementById("name").innerHTML = nameLi[index];
        }
    </script>
</body>
</html>

 

随机点名器


联系
我们