<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二年级3班课堂随机抽人</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #e6f7ff 0%, #b3e0ff 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #0066cc;
}
.container {
width: 100%;
max-width: 900px;
text-align: center;
background: rgba(255, 255, 255, 0.8);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 102, 204, 0.2);
}
h1 {
font-size: 2.8rem;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
color: #0066cc;
}
.name-display {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
padding: 40px 20px;
margin: 30px 0;
min-height: 250px;
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed #66b3ff;
}
#student-name {
font-family: '楷体', 'KaiTi', serif;
font-size: 4rem;
color: #0066cc;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.highlight {
font-size: 5.5rem !important;
color: #ff6600 !important;
text-shadow: 0 0 20px rgba(255, 102, 0, 0.4) !important;
animation: pulse 1.2s infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.05); }
}
.control-btn {
background: linear-gradient(to right, #0066cc, #0099ff);
border: none;
border-radius: 50px;
padding: 18px 50px;
font-size: 1.5rem;
color: white;
cursor: pointer;
margin: 20px 0;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.control-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
background: linear-gradient(to right, #0099ff, #00ccff);
}
.control-btn:active {
transform: translateY(1px);
}
.students-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 30px;
max-height: 200px;
overflow-y: auto;
padding: 15px;
background: rgba(230, 247, 255, 0.5);
border-radius: 10px;
}
.student-tag {
background: rgba(255, 255, 255, 0.9);
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
cursor: pointer;
border: 1px solid #b3e0ff;
transition: all 0.3s ease;
}
.student-tag:hover {
background: #e6f7ff;
transform: scale(1.05);
}
.selected {
background: linear-gradient(to right, #0066cc, #0099ff);
color: white;
font-weight: bold;
transform: scale(1.1);
transition: all 0.3s ease;
}
.editing {
background: #fff0cc;
border: 2px solid #ffcc00;
}
.footer {
margin-top: 30px;
font-size: 0.9rem;
opacity: 0.8;
color: #0066cc;
}
.instructions {
margin-top: 15px;
padding: 10px;
background: rgba(230, 247, 255, 0.7);
border-radius: 10px;
font-size: 0.9rem;
color: #0066cc;
}
</style>
</head>
<body>
<div class="container">
<h1>二年级3班课堂随机抽人</h1>
<div class="name-display">
<div id="student-name">准备开始</div>
</div>
<button class="control-btn" id="draw-btn">开始抽人</button>
<div class="instructions">
提示：单击下方学生姓名可以直接修改，按回车键确认修改
</div>
<div class="students-list" id="students-container">
<!-- 学生名单将通过JS动态添加 -->
</div>
<div class="footer">
公平参与 • 快乐学习 • 二年级3班
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const students = [
"林宇航", "谭欣恬", "金芷研", "徐梦瑶", "王潮奕",
"杨依萌", "魏梓楠", "邓诗蕊", "钟俊一", "郭语杰",
"宋雨鑫", "游峻灏", "谭钰彤", "杨宏佑", "王浩骅",
"宋思琪", "李月婷", "徐林芸", "张艺默", "马奕琦",
"廖志豪", "杨天佑", "廖艺萱", "黄宇航", "付梓怡",
"罗雨诺", "罗诗茵", "郭妤萌", "古瑾瑜", "徐紫悦",
"林睿轩", "游锐涵", "冯呈萱", "冯怡菡", "胡芮翎",
"龙羽芝", "高阳娜娜", "付青禹", "吴俊杰", "陈璐晗",
"付彦辰", "林艺诺", "林嘉皓", "蒲志豪", "游瑾瑜"
];
const nameDisplay = document.getElementById('student-name');
const drawButton = document.getElementById('draw-btn');
const studentsContainer = document.getElementById('students-container');
let isDrawing = false;
let drawInterval;
let lastSelectedIndex = -1;
// 初始化学生列表
function initStudentsList() {
studentsContainer.innerHTML = '';
students.forEach((student, index) => {
const studentTag = document.createElement('div');
studentTag.classList.add('student-tag');
studentTag.textContent = student;
studentTag.dataset.index = index;
// 添加点击编辑功能
studentTag.addEventListener('click', function(e) {
if (isDrawing) return; // 抽人过程中不允许编辑
const index = parseInt(this.dataset.index);
editStudentName(this, index);
});
studentsContainer.appendChild(studentTag);
});
}
// 编辑学生姓名
function editStudentName(element, index) {
const currentName = element.textContent;
element.contentEditable = true;
element.classList.add('editing');
element.focus();
// 选中文本
const range = document.createRange();
range.selectNodeContents(element);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
// 处理回车键保存
function saveOnEnter(e) {
if (e.key === 'Enter') {
e.preventDefault();
element.contentEditable = false;
element.classList.remove('editing');
const newName = element.textContent.trim();
if (newName && newName !== currentName) {
students[index] = newName;
// 如果当前显示的是被修改的学生，更新显示
if (nameDisplay.textContent === currentName) {
nameDisplay.textContent = newName;
}
} else {
element.textContent = currentName;
}
element.removeEventListener('keydown', saveOnEnter);
}
}
element.addEventListener('keydown', saveOnEnter);
// 失去焦点时保存
element.addEventListener('blur', function() {
element.contentEditable = false;
element.classList.remove('editing');
const newName = element.textContent.trim();
if (newName && newName !== currentName) {
students[index] = newName;
// 如果当前显示的是被修改的学生，更新显示
if (nameDisplay.textContent === currentName) {
nameDisplay.textContent = newName;
}
} else {
element.textContent = currentName;
}
}, {once: true});
}
// 随机选择学生函数
function getRandomStudent() {
let randomIndex;
// 确保不会连续两次选到同一个学生
do {
randomIndex = Math.floor(Math.random() * students.length);
} while (randomIndex === lastSelectedIndex && students.length > 1);
lastSelectedIndex = randomIndex;
return {
name: students[randomIndex],
index: randomIndex
};
}
// 开始或停止抽取
drawButton.addEventListener('click', function() {
if (!isDrawing) {
// 开始抽取
isDrawing = true;
drawButton.textContent = '停止抽人';
drawButton.style.background = 'linear-gradient(to right, #ff6600, #ff9933)';
nameDisplay.classList.remove('highlight');
drawInterval = setInterval(function() {
const randomStudent = getRandomStudent();
nameDisplay.textContent = randomStudent.name;
// 更新学生列表中的高亮
document.querySelectorAll('.student-tag').forEach(tag => {
tag.classList.remove('selected');
});
document.querySelector(`.student-tag[data-index="${randomStudent.index}"]`).classList.add('selected');
}, 100);
} else {
// 停止抽取
isDrawing = false;
clearInterval(drawInterval);
drawButton.textContent = '开始抽人';
drawButton.style.background = 'linear-gradient(to right, #0066cc, #0099ff)';
// 放大显示最终选中的学生
nameDisplay.classList.add('highlight');
}
});
// 初始化学生列表
initStudentsList();
});
</script>
</body>
</html>