网站首页 > 技术文章正文

教师如何制作随机点名系统，活跃课堂气氛

nanyue 2025-08-02 20:42:13 技术文章 2 ℃

上课点名抽学生回答问题，做游戏……由老师口头点名，点谁回答总有点老师本人的情绪，且显得毫无趣味，但做一个点名系统，就不一样了，电脑随机抽出的名字，不仅公平，还会给孩子们带来一种不一样的感受。

那么怎么做呢？

其实目前做这个很简单，没有一点编写代码经验的人都能做到。只需要告诉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>

<option value="郑老师任教一班">郑老师任教一班</option>

<option value="郑老师任教二班">郑老师任教二班</option>

</select>

</div>

<h3>数据导入功能</h3>

<p>说明：请使用CSV格式文件，包含【班级】和【姓名】两列</p>

</div>

// 修复点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>

上一篇：每个前端工程师须知的20个现代CSS规则
下一篇：如何设置Flexbox项目之间的距离

网站首页 > 技术文章 正文

教师如何制作随机点名系统，活跃课堂气氛

猜你喜欢

网站首页 > 技术文章正文