利用CSS+HTML+JS完成一个随机的点名系统

最新推荐文章于 2024-03-04 10:21:38 发布

Hamburger-steak

最新推荐文章于 2024-03-04 10:21:38 发布

阅读量268

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_62756941/article/details/131987280

版权

点击开始按钮，按钮会变成停止。
选择过程中名字会显示随机变蓝，点击停止按钮，被选择的名字会变色。
被选中的名字会进入下列获奖人员名单中。
直至名单的所有人都进入获奖名单，点击按钮无反应。

结果展示：

以下是全部代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1,h3 {
            text-align: center;
        }

        #head {
            margin: 50px;
            text-align: center;
        }

        #begin {
            width: 150px;
            height: 50px;
            background-color: rgb(103, 214, 248);
            border-radius: 10px;
            font-size: large;
        }

        #selectbox {
            margin: 50px;
            /* border: 2px solid red; */
        }

        .selectone {
            margin: 30px;
            width: 150px;
            height: 50px;
            background-color: aquamarine;
            border-radius: 10px;
            font-size: larger;
            color: black;
        }

        #boxwinned {
            justify-content: center;
            margin: 50px;
            /* border: 2px solid red; */
        }
    </style>
</head>

<body>
    <!-- html+css -->
    <h1>随机点名系统</h1>
    <div id="head">
        <button id="begin" onclick="goto(this)">开始</button>

    </div>
    <div id="selectbox">
        <!-- 此处需要利用数组添加名单故不填 -->

    </div>
    <div id="boxwinned">
        <h3>获奖人员</h3>
    </div>
    <script>
        var interval
        var choosename
        // 将我们要放如的人员名单数组设为全局变量
        var nameboxs = ["name1", "name2", "name3", "name4", "name5"
            , "name6", "name7", "name8", "name9", "name10", "name11", "name12",
            "name13", "name14", "name15", "name16", "name17", "name18",]

        // 初始化表格，默认加载页面时就执行
        function initab() {
            // 遍历数组nemaboxs，填充名字表格
            let selectboxs = document.getElementById("selectbox")
            let htmlstr = ''
            nameboxs.forEach(function (value, index) {
                htmlstr += '<button class="selectone">' + value + '</button>'

            })
            selectboxs.innerHTML = htmlstr
        }
        initab()

        // 按键的方法
        function goto(obj) {
            if (obj.innerHTML == "开始") {
                interval = window.setInterval("randomone()", 100)
                // 设置个时间循环
                document.getElementById("begin").innerHTML = "停止"
            }
            else {
                window.clearInterval(interval)
                document.getElementById("begin").innerHTML = "开始"
                if (nameboxs.length > 0) {
                    // 判断名单数组是否大于0，防止数组下表溢出
                    let boxwinnedDiv = document.getElementById("boxwinned")
                    boxwinnedDiv.innerHTML += '<button class="selectone">' + choosename + '</button>'
                    // 从数组中删除指定的内容

                    let index = nameboxs.indexOf(choosename)
                    nameboxs.splice(index, 1)
                }
            }


        }

        function randomone() {
            // 每次点击都调用初始化方法，（清除上一次点击的效果）
            initab()
            // 定义方法，随机选择一个name
            // 获取一个随机的下标数字
            let index = Math.floor(Math.random() * nameboxs.length)
            // console.log(nameboxs[index]);
            if (nameboxs.length > 0) {
                // 判断名单数组是否大于0，防止数组下表溢出

                choosename = nameboxs[index]
                // 获取所有的人员的名字按钮,可视化选择过程
                let buttons = document.querySelectorAll(".selectone")
                buttons[index].style.backgroundColor = "blue"
            }

        }
    </script>
</body>

</html>