DeepSeek网页版随机点名器_随机点名网页版-优快云博客

本文链接：https://blog.youkuaiyun.com/wodeita/article/details/148935352

用DeepSeek帮我们生成了一个基于html5的随机点名器，效果非常棒，如果需要加入名字，请在代码中按照对应的格式添加即可。
提示词prompt
帮我生成一个随机点名的HTML5页面生成真实一点的名字数据点击随机按钮开始随机选择要有闪动的效果，再次点击即可停止并生成随机出来的名字还可以再次随机生成 UI简洁美观
在这里插入图片描述

使用方法 复制源码到html文件中，双击运行即可。
随机点名器所有源码如下

<!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: 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
        }
        
        .container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 500px;
            padding: 30px;
            text-align: center;
        }
        
        h1 {
            margin-top: 0;
            color: #4a6baf;
            font-weight: 500;
        }
        
        .name-display {
            font-size: 2.5rem;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 30px 0;
            border: 2px dashed #ddd;
            border-radius: 8px;
            transition: all 0.3s;
        }
        
        .flashing {
            animation: flash 0.2s infinite alternate;
        }
        
        @keyframes flash {
            from {
                color: #333;
                background-color: white;
            }
            to {
                color: #4a6baf;
                background-color: #f0f4ff;
            }
        }
        
        button {
            background-color: #4a6baf;
            color: white;
            border: none;
            border-radius: 50px;
            padding: 12px 30px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(74, 107, 175, 0.3);
        }
        
        button:hover {
            background-color: #3a5a9f;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(74, 107, 175, 0.4);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .history {
            margin-top: 20px;
            font-size: 0.9rem;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>随机点名系统</h1>
        <div id="nameDisplay" class="name-display">点击开始随机选择</div>
        <button id="randomBtn">开始随机</button>
        <div class="history">已选: <span id="history"></span></div>
    </div>

    <script>
        // 真实名字数据
        const names = [
            "张伟", "王芳", "李娜", "刘强", "陈静", "杨光", "赵敏", "黄磊", 
            "周杰", "吴秀波", "郑爽", "孙俪", "马化腾", "朱军", "胡歌", 
            "林心如", "郭德纲", "何炅", "高圆圆", "罗永浩", "梁朝伟", 
            "谢娜", "宋丹丹", "董卿", "徐峥", "沈腾", "贾玲", "白岩松", 
            "章子怡", "范冰冰", "吴京", "邓超", "杨幂", "刘诗诗", "赵丽颖", 
            "迪丽热巴", "古力娜扎", "杨洋", "李易峰", "鹿晗", "吴亦凡", 
            "张艺兴", "黄子韬", "王俊凯", "易烊千玺", "王源", "蔡徐坤", 
            "王一博", "肖战", "李现", "朱一龙", "张一山", "杨紫", "关晓彤", 
            "欧阳娜娜", "周冬雨", "马思纯", "井柏然", "陈赫", "郑恺", 
            "包贝尔", "王宝强", "黄渤", "徐静蕾", "韩寒", "冯小刚", "张艺谋", 
            "陈凯歌", "姜文", "葛优", "周润发", "刘德华", "张学友", "郭富城", 
            "黎明", "梁家辉", "张家辉", "古天乐", "刘青云", "吴彦祖", "金城武"
        ];
        
        const nameDisplay = document.getElementById('nameDisplay');
        const randomBtn = document.getElementById('randomBtn');
        const historyDisplay = document.getElementById('history');
        
        let isRandomizing = false;
        let randomInterval;
        let selectedNames = [];
        
        randomBtn.addEventListener('click', function() {
            if (!isRandomizing) {
                // 开始随机
                isRandomizing = true;
                randomBtn.textContent = '停止';
                nameDisplay.classList.add('flashing');
                
                // 快速切换名字
                randomInterval = setInterval(() => {
                    const randomIndex = Math.floor(Math.random() * names.length);
                    nameDisplay.textContent = names[randomIndex];
                }, 100);
            } else {
                // 停止随机
                isRandomizing = false;
                randomBtn.textContent = '再次随机';
                nameDisplay.classList.remove('flashing');
                clearInterval(randomInterval);
                
                // 确保最终选中的名字不在历史记录中重复
                let selectedName;
                do {
                    const randomIndex = Math.floor(Math.random() * names.length);
                    selectedName = names[randomIndex];
                } while (selectedNames.includes(selectedName) && selectedNames.length < names.length);
                
                nameDisplay.textContent = selectedName;
                selectedNames.push(selectedName);
                
                // 更新历史记录
                if (selectedNames.length > 5) {
                    selectedNames.shift();
                }
                historyDisplay.textContent = selectedNames.join(', ');
            }
        });
    </script>
</body>
</html>