物理 驼峰航线运输站
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课堂随机点名系统</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.container {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
width: 80%;
max-width: 500px;
}
h1 {
color: #3a7bd5;
margin-bottom: 1.5rem;
}
#display {
font-size: 2.5rem;
height: 3rem;
margin: 2rem 0;
color: #2c3e50;
font-weight: bold;
}
.btn {
background: #3a7bd5;
color: white;
border: none;
padding: 0.8rem 1.5rem;
margin: 0 0.5rem;
border-radius: 50px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn:hover {
background: #00d2ff;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.btn:disabled {
background: #bdc3c7;
cursor: not-allowed;
}
#studentList {
margin-top: 2rem;
max-height: 200px;
overflow-y: auto;
border-top: 1px solid #eee;
padding-top: 1rem;
}
</style>
</head>
<body>
<div class="container">
<h1>🎯 课堂随机点名系统</h1>
<div id="display">准备开始</div>
<div>
<button id="startBtn" class="btn">开始点名</button>
<button id="stopBtn" class="btn" disabled>停止</button>
<button id="resetBtn" class="btn">重置</button>
</div>
<div id="studentList"></div>
</div>
<script>
// 学生名单（可替换为实际名单）
const students = [
"111", "222", "333", "444", "555",
"666", "777", "888", "999", "10"
];
let intervalId;
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const resetBtn = document.getElementById('resetBtn');
const display = document.getElementById('display');
const studentList = document.getElementById('studentList');
// 初始化显示学生名单
function initStudentList() {
studentList.innerHTML = '<h3>班级名单 (' + students.length + '人)</h3>';
students.forEach(student => {
studentList.innerHTML += '<div>' + student + '</div>';
});
}
// 随机选择学生
function getRandomStudent() {
const randomIndex = Math.floor(Math.random() * students.length);
return students[randomIndex];
}
// 开始点名
startBtn.addEventListener('click', function() {
startBtn.disabled = true;
stopBtn.disabled = false;
// 快速切换显示名字（动画效果）
intervalId = setInterval(() => {
display.textContent = getRandomStudent();
display.style.color = getRandomColor();
}, 100);
});
// 停止点名
stopBtn.addEventListener('click', function() {
clearInterval(intervalId);
startBtn.disabled = false;
stopBtn.disabled = true;
// 高亮显示最终选中的学生
display.style.fontWeight = 'bold';
display.style.fontSize = '3rem';
display.style.color = '#e74c3c';
});
// 重置
resetBtn.addEventListener('click', function() {
clearInterval(intervalId);
display.textContent = '准备开始';
display.style = '';
startBtn.disabled = false;
stopBtn.disabled = true;
});
// 生成随机颜色
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 页面加载时初始化
window.onload = initStudentList;
</script>
</body>
</html>
