教师如何制作随机点名系统，活跃课堂气氛
zhezhongyun 2025-07-02 00:15 39 浏览
上课点名抽学生回答问题，做游戏……由老师口头点名，点谁回答总有点老师本人的情绪，且显得毫无趣味，但做一个点名系统，就不一样了，电脑随机抽出的名字，不仅公平，还会给孩子们带来一种不一样的感受。
那么怎么做呢？
其实目前做这个很简单，没有一点编写代码经验的人都能做到。只需要告诉deepseek，你想做做什么，需达到些什么功能，它就能帮助你编辑好代码。而且还能测试。
如上图，就是让deepseek帮助编写的html点名系统，测试完成，复制出代码，粘贴到记事本上，另存为html网页文件就ok了。注意另存时编码必须utf-8
大家可以去试一试。也可以直接复制下方代码，到记事本上，另存为html文件。并找一个背景音乐，取名"点名音乐.mp3"和html文件放在一起。运行html，下载模板，把学生名字改成自己班上的。再上传上去，就能完美使用了。
<!DOCTYPE html>
<html>
<head>
<title>郑老师随机点名系统</title>
<style>
/* 样式部分保持不变 */
body {
background-color: #1e90ff;
margin: 0;
padding: 20px;
font-family: '微软雅黑', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
h1 {
color: white;
font-size: 3em;
margin: 20px 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.container {
background: rgba(255,255,255,0.95);
padding: 30px;
border-radius: 15px;
width: 80%;
max-width: 800px;
margin: 20px 0;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
#nameDisplay {
font-size: 6em;
font-weight: 900;
color: #2c3e50;
text-align: center;
margin: 50px 0;
min-height: 120px;
letter-spacing: 3px;
}
button {
background-color: #ff6b6b;
color: white;
border: none;
padding: 20px 40px;
font-size: 24px;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s;
margin: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.import-section {
margin-top: 40px;
background: rgba(255,255,255,0.9);
padding: 20px;
border-radius: 10px;
width: 80%;
max-width: 600px;
}
#music {
display: none;
}
</style>
</head>
<body>
<h1>郑老师随机点名</h1>
<div class="container">
<select id="classSelect">
<option value="郑老师任教一班">郑老师任教一班</option>
<option value="郑老师任教二班">郑老师任教二班</option>
</select>
<div id="nameDisplay">准备就绪</div>
</div>
<button id="startBtn"> 开始点名</button>
<audio id="music" loop src="点名音乐.mp3"></audio>
<div class="import-section">
<h3>数据导入功能</h3>
<input type="file" id="fileInput" accept=".csv">
<button onclick="downloadTemplate()">下载模板</button>
<p>说明：请使用CSV格式文件，包含【班级】和【姓名】两列</p>
</div>
<script>
// 修复点1：添加完整初始化数据
const initialData = [
['班级', '姓名'],
['郑老师任教一班', '李星晨'],
['郑老师任教一班', '李程峻'],
// ...其他初始数据...
['郑老师任教二班', '王二']
];
// 修复点2：完善本地存储逻辑
let classes = loadFromLocalStorage() || processRawData(initialData);
// 核心功能变量
let currentNames = [];
let isRunning = false;
let intervalId = null;
let timeoutId = null;
const elements = {
nameDisplay: document.getElementById('nameDisplay'),
startBtn: document.getElementById('startBtn'),
classSelect: document.getElementById('classSelect'),
music: document.getElementById('music'),
fileInput: document.getElementById('fileInput')
};
// 修复点3：添加事件监听器绑定
function bindEvents() {
elements.startBtn.addEventListener('click', toggleRoll);
elements.classSelect.addEventListener('change', updateNames);
elements.fileInput.addEventListener('change', handleFile);
}
// 主逻辑
function updateNames() {
currentNames = classes[elements.classSelect.value] || [];
elements.nameDisplay.textContent = "班级已准备";
elements.nameDisplay.style.color = "#2c3e50";
}
function getRandomName() {
return currentNames.length > 0
? currentNames[Math.floor(Math.random() * currentNames.length)]
: "暂无数据";
}
// 数据存储功能
function saveToLocalStorage() {
localStorage.setItem('classData', JSON.stringify(classes));
}
function loadFromLocalStorage() {
const data = localStorage.getItem('classData');
return data ? JSON.parse(data) : null;
}
// 文件处理
function processRawData(rows) {
return rows.slice(1).reduce((acc, [className, name]) => {
className = (className || '未命名班级').toString().trim();
name = (name || '无名学生').toString().trim();
acc[className] = acc[className] || [];
acc[className].push(name);
return acc;
}, {});
}
function handleFile(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const csvData = event.target.result;
const rows = csvData.split('\n').map(row => {
const [a, b] = row.split(',').map(c => c.replace(/["'\s]/g, ''));
return [a || '未命名班级', b || '无名学生'];
});
classes = processRawData(rows);
saveToLocalStorage();
elements.classSelect.innerHTML = Object.keys(classes)
.map(c => `<option value="${c}">${c}</option>`).join('');
updateNames();
alert(`成功导入 ${Object.values(classes).reduce((a,b) => a+b.length,0)} 个学生数据`);
};
reader.readAsText(file);
}
function downloadTemplate() {
const csvContent = "班级,姓名\n五1班,赵一\n五1班,钱一";
const blob = new Blob([csvContent], { type: 'text/csv' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = '班级模板.csv';
link.click();
}
// 开始/暂停逻辑
function toggleRoll() {
isRunning = !isRunning;
elements.startBtn.textContent = isRunning ? ' 暂停抽选' : ' 开始点名';
elements.startBtn.style.backgroundColor = isRunning ? '#4ecdc4' : '#ff6b6b';
if (isRunning) {
elements.music.play().catch(() => console.log('音乐播放被阻止'));
intervalId = setInterval(() => {
elements.nameDisplay.textContent = getRandomName();
}, 50);
timeoutId = setTimeout(() => {
if(isRunning) toggleRoll();
}, 3000);
} else {
clearTimeout(timeoutId);
elements.music.pause();
clearInterval(intervalId);
elements.nameDisplay.style.color = '#1e90ff';
}
}
// 修复点4：完善初始化流程
function init() {
bindEvents(); // 绑定事件监听器
updateNames(); // 初始化当前班级
// 加载本地存储提示
if(localStorage.getItem('classData')) {
alert('已加载上次保存的学生名单');
} else {
saveToLocalStorage(); // 保存初始数据
}
}
init(); // 执行初始化
</script>
</body>
</html>
相关推荐
- Python入门学习记录之一:变量_python怎么用变量
-
写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...
- python变量命名规则——来自小白的总结
-
python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...
- Python入门学习教程:第 2 章 变量与数据类型
-
2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...
- 绘制学术论文中的“三线表”具体指导
-
在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...
- Python基础语法知识--变量和数据类型
-
学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...
- 一文搞懂 Python 中的所有标点符号
-
反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...
- Python变量类型和运算符_python中变量的含义
-
别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...
- 从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序
-
在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...
- Python中下划线 ‘_’ 的用法，你知道几种
-
Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...
- 解锁Shell编程:变量_shell $变量
-
引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...
- 一文学会Python的变量命名规则!_python的变量命名有哪些要求
-
目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...
- 更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for
-
src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...
- C++第五课:变量的命名规则_c++中变量的命名规则
-
变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....
- Rust编程-核心篇-不安全编程_rust安全性
-
Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...
- 探秘 Python 内存管理:背后的神奇机制
-
在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- opacity 属性 (32)
- transition 属性 (33)
- 1-1. 变量声明 (31)