极其简单的一个点名器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
</head>
<body>

<!-- 用来显示学生姓名 -->
<div id="show">点击下面按钮开始点名</div>
<br>
<!-- 控制开始 / 停止的按钮 -->
<button id="btn">开始点名</button>

<script>
    // 1. 定义一维数组保存 8 个学生姓名
    var names = ["张三", "李四", "王五", "赵六", "小红", "小明", "小刚", "小芳"];

    // 2. 定义一个变量保存定时器编号（初始为 null，表示还没开始）
    var timer = null;

    // 3. 获取页面上的元素
    var showDiv = document.getElementById("show");
    var btn = document.getElementById("btn");

    // 4. 给按钮绑定点击事件
    btn.onclick = function () {
        // 如果当前没有定时器，说明要开始滚动
        if (timer === null) {
            timer = setInterval(function () {
                // 在 0 ~ names.length-1 之间随机一个整数
                var index = Math.floor(Math.random() * names.length);
                // 把随机到的名字显示在页面上
                showDiv.innerHTML = names[index];
            }, 100); // 每 100 毫秒换一个名字

            btn.innerHTML = "停止点名";
        } else {
            // 如果已经有定时器了，说明当前是“停止点名”
            clearInterval(timer); // 关闭定时器
            timer = null;         // 把标记清空
            btn.innerHTML = "开始点名";
            // 停下来的那一刻显示的名字就是被点到的人
        }
    };
</script>

</body>
</html>
一条评论

留下评论取消回复
