爆炸！用html为老师写个随机点名系统，点名直接用！！

于 2025-02-26 22:14:06 发布
阅读量985 收藏 15
点赞数 18
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47139678/article/details/145889919
版权

在日常教学、会议签到、活动抽奖等场景中，随机点名系统是一个非常实用的工具。今天，我们就来一个基于 HTML、CSS 和 JavaScript 实现的智能随机点名系统的代码，并了解其功能和应用场景。

一、系统功能概述

这个智能随机点名系统主要具备以下功能：

  1. 添加姓名：用户可以通过输入框手动输入姓名并添加到点名列表中。

  2. 导入 Excel：支持从 Excel 文件（.csv 或.xlsx 格式）中批量导入姓名，方便快捷地录入大量数据。

  3. 随机点名：从已录入的姓名列表中随机抽取一个名字作为结果显示，同时提供了一个动画效果，增加趣味性。

  4. 删除姓名：可以单个删除指定的姓名，也支持批量删除已选中的姓名。

  5. 全选和取消全选：提供了全选和取消全选的功能，方便用户进行批量操作。

  6. 状态显示：实时显示当前点名列表中的人数，并且根据列表的状态动态更新操作按钮的可用性。

  7. 本地存储：系统使用本地存储（localStorage）来保存点名列表，确保数据在页面刷新或关闭后仍然存在。

    图片

二、代码结构分析

  1. HTML 结构：页面采用了简洁的布局，包含一个输入框、几个按钮、一个显示点名列表的无序列表、一个显示结果的区域以及一个状态显示条。通过不同的类名（如 .container、.input-group、.name-list 等）来组织和样式化各个元素。

  2. CSS 样式：使用了 CSS 变量（--primary-color、--secondary-color、--background）来定义主要的颜色，方便统一管理和修改。通过对不同类名的样式设置，实现了页面的美观和交互效果，如按钮的悬停效果、列表项的高亮效果等。

  3. JavaScript 逻辑：

    • 初始化和数据存储：在页面加载时，从本地存储中读取已保存的姓名列表，并初始化页面显示。通过 saveToStorage 函数将更新后的列表保存到本地存储中。

    • 添加和删除姓名：addName 函数负责将新的姓名添加到列表中，deleteName 函数用于删除指定的姓名。在添加或删除操作后，会更新列表显示、保存数据到本地存储，并根据列表状态更新按钮的可用性。

    • 批量操作：toggleSelection 函数用于处理复选框的选中和取消选中状态，selectAll 函数实现全选和取消全选的功能，batchDelete 函数用于批量删除已选中的姓名。

    • Excel 导入：handleFile 函数通过 FileReader 和 xlsx 库读取 Excel 文件内容，并将其中的姓名添加到点名列表中。在导入过程中，会显示一个加载提示，导入完成后更新列表和相关状态。

    • 随机点名：randomPick 函数实现了随机点名的功能，通过一个动画效果在列表中快速切换姓名，最后随机抽取一个作为结果显示，并高亮显示选中的姓名。

三、应用场景

  1. 教学场景：教师可以使用该系统随机抽取学生回答问题，增加课堂互动性和公平性。

  2. 会议签到：在会议开始前，参会人员的姓名可以录入系统，会议过程中可以随机抽取参会人员进行发言或提问。

  3. 活动抽奖：在各种活动中，将参与者的姓名录入系统，通过随机点名来确定中奖者，增加活动的趣味性和公正性。

四、安装这个代码

  1. 新建一个.txt文件：

    图片

  2. 然后复制下面全部代码到这个dm.txt中：

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>智能随机点名系统</title>
    <style>
        :root {
            --primary-color: #2196F3;
            --secondary-color: #ff4081;
            --background: #f5f5f5;
        }

        body {
            font-family: 'Microsoft Yahei', Arial, sans-serif;
            background: var(--background);
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        input[type="text"] {
            flex: 1;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 6px;
            transition: border-color 0.3s;
        }

        input[type="text"]:focus {
            border-color: var(--primary-color);
            outline: none;
        }

        button {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            background: var(--primary-color);
            color: white;
        }

        button:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        .file-input {
            position: relative;
            display: inline-block;
        }

        .file-input input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .name-list {
            list-style: none;
            padding: 0;
            margin: 20px 0;
            border: 2px solid #eee;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
        }

        .name-list li {
            padding: 15px;
            margin: 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
        }

        .name-list li:last-child {
            border-bottom: none;
        }

        .name-list li:hover {
            background: #f8f9fa;
        }

        .name-list .name-content {
            flex: 1;
            margin-left: 10px;
        }

        .highlight {
            background: #fff3e0 !important;
            font-weight: bold;
        }

        .result-box {
            text-align: center;
            padding: 30px;
            margin: 20px 0;
            background: #f8f9fa;
            border-radius: 8px;
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--primary-color);
            transition: all 0.3s;
        }

        @keyframes spin {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }

        .spinning {
            animation: spin 0.1s infinite;
            color: var(--secondary-color);
        }

        .status-bar {
            text-align: right;
            color: #666;
            font-size: 14px;
            margin-top: 20px;
        }

        .delete-btn {
            background: var(--secondary-color);
            padding: 6px 12px;
            font-size: 12px;
        }

        .loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .loading.active {
            display: flex;
        }

        .batch-actions {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        .delete-all-btn {
            background: var(--secondary-color);
        }

        .name-checkbox {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎉 智能随机点名系统</h1>
        </div>

        <div class="input-group">
            <input type="text" id="nameInput" placeholder="请输入姓名...">
            <button onclick="addName()">➕ 添加</button>
            <div class="file-input">
                <button>📁 导入Excel</button>
                <input type="file" id="excelFile" accept=".csv,.xlsx" onchange="handleFile()">
            </div>
            <button onclick="randomPick()" id="pickBtn" disabled>🎮 开始点名</button>
        </div>

        <div class="batch-actions">
            <button onclick="selectAll()" id="selectAllBtn">全选</button>
            <button onclick="batchDelete()" class="delete-all-btn" id="batchDeleteBtn" disabled>批量删除</button>
        </div>

        <ul class="name-list" id="nameList"></ul>

        <div class="result-box" id="result">
            👇 点击上方按钮开始
        </div>

        <div class="status-bar">
            当前人数: <span id="count">0</span>
        </div>
    </div>

    <div class="loading" id="loading">
        <div style="font-size: 24px; color: var(--primary-color)">⏳ 正在导入数据...</div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
    <script>
        // 初始化本地存储
        let names = JSON.parse(localStorage.getItem('names')) || [];
        let isSpinning = false;
        let selectedNames = [];

        // 页面加载时初始化列表
        window.onload = () => {
            renderList();
            updateButtonState();
            updateCount();
        };

        function saveToStorage() {
            localStorage.setItem('names', JSON.stringify(names));
            updateCount();
        }

        function updateCount() {
            document.getElementById('count').textContent = names.length;
        }

        function updateButtonState() {
            const pickBtn = document.getElementById('pickBtn');
            pickBtn.disabled = names.length < 2;
            
            const batchDeleteBtn = document.getElementById('batchDeleteBtn');
            batchDeleteBtn.disabled = selectedNames.length === 0;
        }

        function renderList() {
            const list = document.getElementById('nameList');
            list.innerHTML = names.map(name => `
                <li>
                    <input type="checkbox" class="name-checkbox" onchange="toggleSelection('${name}', this.checked)">
                    <span class="name-content">${name}</span>
                    <button class="delete-btn" onclick="deleteName('${name}')">删除</button>
                </li>
            `).join('');
            selectedNames = [];
            updateButtonState();
        }

        function addName(name) {
            const nameToAdd = name || document.getElementById('nameInput').value.trim();
            if (nameToAdd && !names.includes(nameToAdd)) {
                names.push(nameToAdd);
                renderList();
                document.getElementById('nameInput').value = '';
                saveToStorage();
                updateButtonState();
            }
        }

        function deleteName(name) {
            names = names.filter(n => n !== name);
            selectedNames = selectedNames.filter(n => n !== name);
            renderList();
            saveToStorage();
            updateButtonState();
        }

        function toggleSelection(name, isChecked) {
            if (isChecked) {
                if (!selectedNames.includes(name)) {
                    selectedNames.push(name);
                }
            } else {
                selectedNames = selectedNames.filter(n => n !== name);
            }
            updateButtonState();
        }

        function selectAll() {
            const checkboxes = document.querySelectorAll('.name-checkbox');
            const selectAllBtn = document.getElementById('selectAllBtn');
            
            // 检查是否所有都已选中
            const allSelected = selectedNames.length === names.length;
            
            if (allSelected) {
                // 如果全部已选中，则取消全选
                checkboxes.forEach(cb => cb.checked = false);
                selectedNames = [];
                selectAllBtn.textContent = '全选';
            } else {
                // 否则全选
                checkboxes.forEach(cb => cb.checked = true);
                selectedNames = [...names];
                selectAllBtn.textContent = '取消全选';
            }
            
            updateButtonState();
        }

        function batchDelete() {
            if (selectedNames.length === 0) return;
            
            if (confirm(`确定要删除选中的 ${selectedNames.length} 个名字吗？`)) {
                names = names.filter(name => !selectedNames.includes(name));
                selectedNames = [];
                renderList();
                saveToStorage();
                updateButtonState();
            }
        }

        async function handleFile() {
            const file = document.getElementById('excelFile').files[0];
            if (!file) return;

            document.getElementById('loading').classList.add('active');
            
            const reader = new FileReader();
            reader.onload = async function(e) {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, {type: 'array'});
                const sheet = workbook.Sheets[workbook.SheetNames[0]];
                const json = XLSX.utils.sheet_to_json(sheet);
                
                json.forEach(row => {
                    const name = Object.values(row)[0]?.toString().trim();
                    if (name && !names.includes(name)) {
                        names.push(name);
                    }
                });

                renderList();
                saveToStorage();
                updateButtonState();
                document.getElementById('loading').classList.remove('active');
            };
            reader.readAsArrayBuffer(file);
        }

        function randomPick() {
            if (isSpinning || names.length < 2) return;
            
            isSpinning = true;
            const resultDiv = document.getElementById('result');
            const btn = document.getElementById('pickBtn');
            btn.disabled = true;
            
            let currentIndex = 0;
            let interval = 50;
            let rounds = 15;
            resultDiv.classList.add('spinning');

            const animate = () => {
                resultDiv.textContent = names[currentIndex];
                currentIndex = (currentIndex + 1) % names.length;
                
                if (rounds-- > 0) {
                    interval += 10;
                    setTimeout(animate, interval);
                } else {
                    const winner = names[Math.floor(Math.random() * names.length)];
                    resultDiv.textContent = `🎉 中奖者: ${winner}`;
                    resultDiv.classList.remove('spinning');
                    btn.disabled = false;
                    isSpinning = false;
                    
                    document.querySelectorAll('#nameList li').forEach(li => {
                        li.classList.toggle('highlight', li.querySelector('.name-content').textContent.includes(winner));
                    });
                }
            };

            setTimeout(animate, interval);
        }
    </script>
</body>
</html>

  3. 然后将dm.txt修改为dm.html:
     

图片

4。然后双击运行这个html文件

图片

5、就可以看到这个点名系统了

创作不易，从构思到成品，饱含我创作的热忱，希望大家尊重原创，拒绝抄袭、盗用！

利用CSS+HTML+JS完成一个随机的点名系统
m0_62756941的博客
07-28 543
【代码】利用CSS+HTML+JS完成一个随机的点名系统。
html如何制作点名系统,js+html实现点名系统功能
weixin_36179402的博客
06-24 1952
本文实例为大家分享了js+html实现点名系统功能的具体代码，供大家参考，具体内容如下前言：实现一个简单的点名系统需求分析：1、两个按钮实现随机点名的开始和结束(onclick()方法)2、每一个名字需要放在一个单独的盒子中并被一个div所包裹,以便于统一格式(动态生成div)3、当随机开始时,随机选取一条数据,并将该条数据所在的div背景颜色更改(random()函数获得随机数,setTimeo...
【休闲】随机点名-html
weixin_44867717的博客
10-30 3698
随机点名 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #start{width: 100px;height: 50px;text-align:center;line-height
随机点名系统
03-07
通过添加TXT文本来随机生成一个你的TXT文字其中一个
jQuery随机点名放烟花特效
07-24
随机点名功能的实现通常涉及到JavaScript的`Math.random()`函数，这个函数可以生成0到1之间的一个随机浮点数。通过与人员名单长度进行比较和取整，我们可以随机选取一个名字。例如，如果我们有一个包含多个名字的...
实现随机点名与烟花庆祝特效的jQuery插件
随机点名功能通常涉及生成一个随机数，这个随机数对应于一组预设的人员名单中的一个。在JavaScript中，可以使用Math.random()函数生成一个0到1之间的随机数，再结合名单数组长度，通过取模运算确定名单中的索引位置...
java随机点名系统
05-09
学J2SE做的一个JAVA随机点名系统.基于TXT文本文件的.
html单页炫酷抽奖点名系统点名器
06-16
班级炫酷点名器，也可以用于抽奖 班级学生教师点名器 主要功能：1.点名 2.添加姓名 3.查看姓名 4.删除姓名 5.历史记录（刷新网页就会没） 6.防偷源代码（禁止右键，禁止f12，禁止ctrl+u） 注：双击网页开始键即可打开2.3.4的功能
jQuery带烟花点名特效
06-01
接着，我们来看看如何实现“随机点名”。这通常涉及到JavaScript的Math.random()函数，该函数返回一个介于0（包括）和1（不包括）之间的随机数。通过将这个随机数与参与者名单长度进行比较，我们可以确定一个随机...
jQuery随机点名中奖烟花动画特效代码
总结而言，该资源结合了前端技术，特别是jQuery库的使用，向用户提供了一个实现随机点名和烟花动画特效的完整解决方案。用户不仅可以直接使用这个特效，还可以根据自己的需要进行修改和扩展，实现个性化的需求。
烟花庆祝的jQuery随机点名特效实现
jQuery实现随机点名通常需要以下几个步骤： 1. **收集名单**：首先需要有一个名单数组，其中包含所有需要被点到的人的名字。 2. **随机选择**：通过JavaScript的`Math.random()`函数生成一个随机数，然后根据这个...
【随机点名系统】
fover7的博客
11-28 398
随机点名系统
简易的随机点名系统
最新发布
azjbfbhw的博客
06-26 917
import tkinter as tk from tkinter import messagebox import random def random_student_name(students): """从学生列表中随机选择一名学生的名字。""" return random.choice(students) def pick_student(): """点名函数，随机选择并显示学生名字。""" chosen_student = random_student_name(
随机点名系统（简易抽奖系统）
dabaiZhang的博客
10-25 1261
以上是HTML代码 以上是CSS的代码 以下是JS代码 // 创建一个空数组 let shuju = []; // 盯图 let tu1 = ["./img/timg1.jpg", "./img/timg.jpg", "./img/bum.gif"]; // 获取标签 let bodyEle = document.querySelector(`body`); let pEle1 = document.getElementsByClassName(`ding`)[0]; let spanEle = d
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值