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