<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二年级4班课堂随机抽人</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #e0f7e0; /* 浅绿色背景 */
font-family: "Microsoft YaHei", sans-serif;
padding: 20px;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
padding: 25px;
background: linear-gradient(135deg, #4caf50, #2e7d32);
color: white;
text-align: center;
}
.header h1 {
font-size: 2.8rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 10px;
}
.header p {
font-size: 1.2rem;
opacity: 0.9;
}
.name-display {
padding: 40px 20px;
text-align: center;
background-color: #f8fff8;
border-bottom: 2px dashed #4caf50;
}
.student-name {
font-family: "楷体", "KaiTi", "STKaiti", serif;
font-size: 5.5rem;
color: #2e7d32;
transition: all 0.3s ease;
padding: 25px;
background: rgba(76, 175, 80, 0.1);
border-radius: 15px;
display: inline-block;
min-width: 350px;
min-height: 180px;
display: flex;
justify-content: center;
align-items: center;
}
.selected {
font-size: 6.5rem !important;
color: #d35400 !important;
transform: scale(1.05);
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}
.button-container {
padding: 30px;
text-align: center;
background-color: #f1f8e9;
}
#startStopBtn {
padding: 18px 50px;
font-size: 1.8rem;
background: linear-gradient(to bottom, #4caf50, #388e3c);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
font-weight: bold;
}
#startStopBtn:hover {
background: linear-gradient(to bottom, #43a047, #2e7d32);
transform: translateY(-3px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
#startStopBtn:active {
transform: translateY(1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.student-list-container {
padding: 30px;
background-color: #f8fff8;
}
.student-list-container h2 {
text-align: center;
margin-bottom: 25px;
color: #2e7d32;
font-size: 2rem;
padding-bottom: 10px;
border-bottom: 2px solid #c8e6c9;
}
.student-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 25px;
}
.student-item {
padding: 12px;
background-color: #e8f5e9;
border-radius: 8px;
text-align: center;
font-size: 1.2rem;
transition: all 0.2s ease;
border: 1px solid #c8e6c9;
display: flex;
justify-content: space-between;
align-items: center;
}
.student-item:hover {
background-color: #c8e6c9;
transform: translateY(-2px);
}
.student-text {
flex-grow: 1;
text-align: center;
padding: 0 10px;
}
.edit-btn {
background: none;
border: none;
color: #388e3c;
cursor: pointer;
font-size: 1.2rem;
padding: 5px;
}
.edit-btn:hover {
color: #1b5e20;
}
.edit-controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.edit-controls button {
padding: 12px 25px;
font-size: 1.1rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
#saveBtn {
background-color: #4caf50;
color: white;
}
#saveBtn:hover {
background-color: #388e3c;
}
#resetBtn {
background-color: #f44336;
color: white;
}
#resetBtn:hover {
background-color: #d32f2f;
}
#addStudent {
background-color: #2196f3;
color: white;
}
#addStudent:hover {
background-color: #1976d2;
}
.rolling {
animation: rollingEffect 0.2s infinite;
}
@keyframes rollingEffect {
0% { transform: translateY(0); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}
.edit-input {
width: 100%;
padding: 10px;
font-size: 1.1rem;
border: 2px solid #4caf50;
border-radius: 8px;
text-align: center;
}
.highlight {
background-color: #fff9c4 !important;
border: 2px solid #ffd54f !important;
}
footer {
text-align: center;
margin-top: 20px;
color: #666;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>二年级4班课堂随机抽人</h1>
<p>公平、随机地选择学生回答问题</p >
</div>
<div class="name-display">
<div id="studentName" class="student-name">点击开始抽人</div>
</div>
<div class="button-container">
<button id="startStopBtn">开始抽人</button>
</div>
<div class="student-list-container">
<h2>学生名单</h2>
<div id="studentList" class="student-grid">
<!-- 学生名单将通过JavaScript动态生成 -->
</div>
<div class="edit-controls">
<button id="addStudent">添加学生</button>
<button id="saveBtn">保存修改</button>
<button id="resetBtn">重置名单</button>
</div>
</div>
</div>
<footer>
<p>二年级4班随机抽人系统 | 设计用于公平课堂提问</p >
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 默认学生名单
const defaultStudentNames = [
"余战豪", "黄佳惠", "徐诚志", "杨凌羽", "杨梓琪",
"徐晨凌", "马馨怡", "石一琳", "冯米", "向佳茜",
"许嘉豪", "游义萱", "雒梓涵", "王雪媛", "陈曦婷",
"王宇轩", "苏维杰", "程逸杰", "李易锦", "廖梓垚",
"罗子懿", "文雅婷", "游知行", "徐一凡", "谭子涵",
"孙凤莲", "孙凤阳", "陈萌", "杨洛灵", "林毓晨",
"刘子妤", "靖好", "戢爱铃", "邵政", "徐钰番",
"高宇霖", "马梓晨", "曹鑫瑞", "郑瑾译", "曾昊熠",
"马熙桐", "吕佳蕊", "郑梓壕"
];
let studentNames = [];
let isRolling = false;
let rollInterval;
let currentStudentIndex = -1;
let editedStudents = new Set();
const nameDisplay = document.getElementById('studentName');
const startStopBtn = document.getElementById('startStopBtn');
const studentList = document.getElementById('studentList');
const saveBtn = document.getElementById('saveBtn');
const resetBtn = document.getElementById('resetBtn');
const addStudentBtn = document.getElementById('addStudent');
// 从本地存储加载学生名单或使用默认名单
function loadStudentNames() {
const savedNames = localStorage.getItem('class4StudentNames');
if (savedNames) {
studentNames = JSON.parse(savedNames);
} else {
studentNames = [...defaultStudentNames];
saveStudentNames();
}
renderStudentList();
}
// 保存学生名单到本地存储
function saveStudentNames() {
localStorage.setItem('class4StudentNames', JSON.stringify(studentNames));
}
// 渲染学生列表
function renderStudentList() {
studentList.innerHTML = '';
studentNames.forEach((name, index) => {
const studentItem = document.createElement('div');
studentItem.className = 'student-item';
if (index === currentStudentIndex) {
studentItem.classList.add('highlight');
}
studentItem.innerHTML = `
<button class="edit-btn" onclick="editStudent(${index})">✎</button>
<span class="student-text">${name}</span>
<button class="edit-btn" onclick="removeStudent(${index})">×</button>
`;
studentList.appendChild(studentItem);
});
}
// 编辑学生姓名
window.editStudent = function(index) {
const studentItems = document.querySelectorAll('.student-item');
const studentItem = studentItems[index];
studentItem.innerHTML = `
<input type="text" class="edit-input" value="${studentNames[index]}"
onkeypress="handleEditKeypress(event, ${index})"
onblur="finishEdit(${index})">
<button class="edit-btn" onclick="cancelEdit(${index})">↶</button>
`;
const input = studentItem.querySelector('.edit-input');
input.focus();
input.select();
}
// 处理编辑时的按键
window.handleEditKeypress = function(e, index) {
if (e.key === 'Enter') {
finishEdit(index);
}
}
// 完成编辑
window.finishEdit = function(index) {
const input = document.querySelector('.edit-input');
if (input && input.value.trim() !== '') {
studentNames[index] = input.value.trim();
editedStudents.add(index);
renderStudentList();
}
}
// 取消编辑
window.cancelEdit = function(index) {
renderStudentList();
}
// 移除学生
window.removeStudent = function(index) {
if (confirm(`确定要删除学生 "${studentNames[index]}" 吗？`)) {
studentNames.splice(index, 1);
renderStudentList();
}
}
// 添加新学生
addStudentBtn.addEventListener('click', function() {
studentNames.push("新学生");
renderStudentList();
editStudent(studentNames.length - 1);
});
// 保存修改
saveBtn.addEventListener('click', function() {
saveStudentNames();
alert('学生名单已保存！');
editedStudents.clear();
});
// 重置名单
resetBtn.addEventListener('click', function() {
if (confirm('确定要重置学生名单吗？所有修改将会丢失。')) {
studentNames = [...defaultStudentNames];
saveStudentNames();
renderStudentList();
editedStudents.clear();
}
});
// 开始/停止抽人
startStopBtn.addEventListener('click', function() {
if (!isRolling) {
// 开始抽人
if (studentNames.length === 0) {
alert('学生名单为空，请添加学生！');
return;
}
isRolling = true;
startStopBtn.textContent = '停止抽人';
nameDisplay.classList.add('rolling');
nameDisplay.classList.remove('selected');
// 随机滚动名字
rollInterval = setInterval(function() {
const randomIndex = Math.floor(Math.random() * studentNames.length);
currentStudentIndex = randomIndex;
nameDisplay.textContent = studentNames[randomIndex];
renderStudentList();
}, 100);
} else {
// 停止抽人
isRolling = false;
startStopBtn.textContent = '开始抽人';
clearInterval(rollInterval);
nameDisplay.classList.remove('rolling');
nameDisplay.classList.add('selected');
renderStudentList();
}
});
// 初始化
loadStudentNames();
});
</script>
</body>
</html>