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

这是一个用于随机点名系统的HTML网页，具有中国古典风格的设计。

下面我将从多个方面详细介绍这个文件：

1. 文件基本信息

文件名：name.html
文件类型：HTML5文档
语言：简体中文(zh-CN)
编码：UTF-8
标题：翰林随机点名

2. 页面结构与功能

这是一个完整的随机点名系统，主要功能包括：

显示名单网格
随机选择名字（开始功能）
停止随机选择
重置选择状态

3. 交互元素

三个控制按钮：

开始按钮：启动随机选择
停止按钮：停止随机选择
重置按钮：清除所有选择状态

这个HTML文件实现了一个完整、美观且功能完善的随机点名系统，适合教室或其他需要随机选择的场景使用，具有浓厚的中国传统文化风格。

4. 更换名字

如下：

5.完整代码

如下：

html 复制代码

<!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>