提示词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>
