当前位置：首页 > news >正文

基于html实现的课题随机点名

news 来源：原创 2025/5/19 19:18:16

这是一个用于随机点名系统的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>