这是一个用于随机点名系统的HTML网页，具有中国古典风格的设计。
下面我将从多个方面详细介绍这个文件：
1. 文件基本信息
-
文件名：name.html
-
文件类型：HTML5文档
-
语言：简体中文(zh-CN)
-
编码：UTF-8
-
标题：翰林随机点名
2. 页面结构与功能
这是一个完整的随机点名系统，主要功能包括：
-
显示名单网格
-
随机选择名字（开始功能）
-
停止随机选择
-
重置选择状态
3. 交互元素
三个控制按钮：
-
开始按钮：启动随机选择
-
停止按钮：停止随机选择
-
重置按钮：清除所有选择状态
这个HTML文件实现了一个完整、美观且功能完善的随机点名系统，适合教室或其他需要随机选择的场景使用，具有浓厚的中国传统文化风格。
4. 更换名字
如下：
5.完整代码
如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>翰林随机点名</title><style>body {background: #f0f5f9; /* 淡蓝灰色背景 */font-family: '华文行楷', 'LiSu', cursive;min-height: 100vh;display: flex;flex-direction: column;align-items: center;}.container {width: 90%;max-width: 1200px;margin: 2rem auto;padding: 20px;border: 3px solid #d4af37; /* 金色边框 */border-radius: 15px;background: #fffef3; /* 米白色背景 */box-shadow: 0 0 20px rgba(0,0,0,0.1);}.name-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 1.5rem;padding: 2rem;min-height: 60vh;}.name-item {font-size: 2.5rem;text-align: center;padding: 1rem;background: #f8f3e6;border: 2px solid #c0b8a8;border-radius: 8px;transition: all 0.3s;}.selected {animation: highlight 1s infinite;border-color: #d4af37;background: #fff9e6;}@keyframes highlight {0% { transform: scale(1); }50% { transform: scale(1.05); }100% { transform: scale(1); }}.controls {text-align: center;margin: 2rem 0;}button {font-size: 1.5rem;padding: 12px 24px;margin: 0 1rem;border: none;border-radius: 30px;background: #d94e4e; /* 朱红色 */color: white;cursor: pointer;transition: all 0.3s;box-shadow: 0 4px 6px rgba(0,0,0,0.1);}button:hover {transform: translateY(-2px);box-shadow: 0 6px 8px rgba(0,0,0,0.2);}/* 中国风装饰 */.decorative-border {position: relative;margin: 20px 0;}.decorative-border::before {content: '';position: absolute;top: -15px;left: -15px;right: -15px;bottom: -15px;border: 2px solid #d4af37;border-radius: 20px;z-index: -1;}</style>
</head>
<body><div class="container decorative-border"><div class="name-grid" id="nameGrid"></div><div class="controls"><button onclick="startRandom()">开 始</button><button onclick="stopRandom()">停 止</button><button onclick="reset()">重 置</button></div></div><script>const names = ['张三', '李四', '王五', '赵六', '陈七', '林八', '黄九', '周十'];let intervalId = null;let currentSelected = null;function initializeNames() {const grid = document.getElementById('nameGrid');grid.innerHTML = names.map(name => `<div class="name-item">${name}</div>`).join('');}function startRandom() {reset();const items = document.getElementsByClassName('name-item');intervalId = setInterval(() => {currentSelected?.classList.remove('selected');currentSelected = items[Math.floor(Math.random()*items.length)];currentSelected.classList.add('selected');}, 100);}function stopRandom() {clearInterval(intervalId);intervalId = null;}function reset() {clearInterval(intervalId);intervalId = null;document.querySelectorAll('.name-item').forEach(item => {item.classList.remove('selected');});}// 初始化window.onload = initializeNames;</script>
</body>
</html>
