随机点名系统开发

随机点名系统开发，可以用于老师课堂上随机点名回答问题。文末可扫码加V。

以下是HTML文件，可以使用浏览器打开它，把班级名单输入进来，每一个学生占一行，然后点击点名按钮，然后在任意时间点击停止按钮，然后就随机出现一个学生名字。

可以新建一个text文件,然后把以下文字全部复制过来并且保存，然后把扩展名从txt改为html,
然后用浏览器打开它就可以使用点名系统了，使用效果见下图。

课堂随机点名系统

    <div class="button-group">
        <button id="startBtn" onclick="startRolling()">开始点名</button>
        <button id="stopBtn" onclick="stopRolling()">停止</button>
    </div>

    <div class="display-area" id="display">
        <span>准备就绪</span>
    </div>
    <div class="error" id="errorMsg">请输入至少两个学生姓名！</div>
</div>

<script>
    let timer = null;
    let names = [];
    let isRolling = false;

    function validateInput() {
        const input = document.getElementById('nameList').value.trim();
        names = input.split('\n').filter(name => name.trim() !== '');
        return names.length >= 2;
    }

    function startRolling() {
        if (!validateInput()) {
            document.getElementById('errorMsg').style.display = 'block';
            return;
        }
        document.getElementById('errorMsg').style.display = 'none';
        
        isRolling = true;
        document.getElementById('startBtn').disabled = true;
        document.getElementById('stopBtn').style.display = 'block';

        const display = document.getElementById('display');
        display.classList.remove('highlight');

        timer = setInterval(() => {
            const randomIndex = Math.floor(Math.random() * names.length);
            display.innerHTML = names[randomIndex];
        }, 50);
    }

    function stopRolling() {
        if (!isRolling) return;

        clearInterval(timer);
        isRolling = false;
        document.getElementById('startBtn').disabled = false;
        document.getElementById('stopBtn').style.display = 'none';
        
        const display = document.getElementById('display');
        display.classList.add('highlight');
    }
</script>