random-roll-call
/
随机点名.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机名字选择器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
            background-color: #ecf0f1;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #2980b9;
        }

        #nameContainer {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 20px;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .circle {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            border-radius: 50%;
            transition: opacity 2s ease, transform 0.5s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            grid-column: span 2;
            grid-row: span 2;
            justify-self: center;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        }

        .circle:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div id="nameContainer"></div>
    <button class="start" style="margin-top: 40px;">随机选择一个名字</button>
    <p id="lastSelectedName"></p>
    <!-- <button class="stop">停止</button> -->

    <script>

        const studentNames = ["程永康", "陈仕祺", "侯雷", "鹿雪", "彭永红", "王金奥", "吴行阳",
            "方逸豪", "张慧玲", "张恒", "姚敏", "杨俊杰", "田原", "肖傅龙",
            "王志明", "谢江霖", "徐庆玲", "姚鸿斌", "张子怡"
        ];
        console.log(studentNames);

        document.addEventListener("DOMContentLoaded", function () {
            createCircles(studentNames);
        });

        var circle = document.getElementsByClassName("circle");
        var start = document.getElementsByClassName('start')[0];
        // var stop = document.getElementsByClassName('stop')[0];
        var shuffledNames = []; // 用于保留初始洗牌后的名字顺序
        var lastSelectedIndex = null; // 用于记录最后一个被选中的索引
        var timer = null; // 定时器
        start.onclick = function () {
            start.disabled = true;
            // 洗牌
                if (shuffledNames.length === 0) {
                shuffledNames = [...studentNames];
            }

            for (let i = shuffledNames.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [shuffledNames[i], shuffledNames[j]] = [shuffledNames[j], shuffledNames[i]];
            }
            console.log(shuffledNames);
            createCircles(shuffledNames);
            // 设置定时器
            timer = setInterval(function () {

                // 根据数组长度范围生成随机数
                // 生成0到18之间的随机整数
                const array = new Uint32Array(1);
                window.crypto.getRandomValues(array);
                const randomNumber = array[0] % shuffledNames.length;
                lastSelectedIndex = randomNumber;
                // var i = Math.floor(Math.random() * studentNames.length);
                // var i= randomNumber
                // console.log(i)
                // 先通过for循环清空所有style属性
                for (var j = 0; j < circle.length; j++) {
                    circle[j].removeAttribute("style");
                }
                circle[lastSelectedIndex].style.background = "red";

            }, 50);
            setTimeout(function () {
                stopRandomSelection();
            }, 5000);//5秒后停止
        };

        function stopRandomSelection() {
            clearInterval(timer);
            // 获取最后一个被选中的名字
            const lastSelectedName = shuffledNames[lastSelectedIndex];
            // 从备选名字数组中移除已经选择的名字
            shuffledNames.splice(lastSelectedIndex, 1);
            // 显示最后一个被选中的名字
            document.getElementById("lastSelectedName").innerHTML = lastSelectedName;

            start.disabled = false;


            // 将最后一个选中的圆圈放大
            // circle[lastSelectedIndex].style.transform = "scale(1.5)";
            // circle[lastSelectedIndex].style.margin = "auto";
            // //绝对定位
            // circle[lastSelectedIndex].style.position = "absolute";
            // circle[lastSelectedIndex].style.left = "46%";
            // circle[lastSelectedIndex].style.top = "30%";
            // // 设置页面居中样式

        }
        // // 点击停止
        // stop.onclick = function () {
        //     // 清空定时器停止点名
        //     clearInterval(timer);
        // }
        function createCircles(names) {
            const nameContainer = document.getElementById("nameContainer");
            nameContainer.innerHTML = ''; // 清空容器

            names.forEach(function (name) {
                const circle = document.createElement("div");
                circle.className = "circle";
                circle.textContent = name;
                nameContainer.appendChild(circle);
            });
        }
    </script>
</body>

</html>