用DeepSeek生成了一個隨機奶茶推薦器-今天喝什么，效果非常棒！UI界面美觀。
提示詞prompt如下
用html5幫我生成一個今天喝什么的網頁 點擊按鈕隨機生成奶茶品牌等，要包括中國常見的知名的奶茶品牌 如果不滿意還可以隨機再次生成 ui界面要好看 隨機推薦的時候要有隨機的閃動的效果 當用戶點擊隨機推薦時候再停止 另外在下方顯示所有的可以隨機到的結果
使用方法：桌面新建txt文檔，源碼復制到txt里面，修改txt后綴名稱，比如1.txt修改為1.html，雙擊運行1.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%, #ffeef8 100%);margin: 0;padding: 20px;min-height: 100vh;display: flex;flex-direction: column;align-items: center;color: #333;}.container {background-color: white;border-radius: 20px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);padding: 40px;width: 90%;max-width: 500px;text-align: center;position: relative;overflow: hidden;margin-bottom: 30px;}h1 {color: #ff4d6d;margin-bottom: 30px;font-size: 28px;}.result-container {background-color: #fff9fb;border-radius: 15px;padding: 25px;margin: 20px 0;border: 2px dashed #ffccd5;min-height: 150px;display: flex;flex-direction: column;justify-content: center;align-items: center;transition: all 0.3s ease;}.result-container:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(255, 77, 109, 0.2);}.brand {font-size: 28px;font-weight: bold;color: #ff4d6d;margin-bottom: 10px;}.recommendation {font-size: 18px;color: #666;}.btn {background: linear-gradient(45deg, #ff4d6d, #ff8fab);border: none;color: white;padding: 12px 30px;font-size: 16px;border-radius: 50px;cursor: pointer;margin: 10px;transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(255, 77, 109, 0.3);font-weight: bold;}.btn:hover {transform: translateY(-3px);box-shadow: 0 7px 20px rgba(255, 77, 109, 0.4);}.btn:active {transform: translateY(1px);}.bubble {position: absolute;background-color: rgba(255, 77, 109, 0.1);border-radius: 50%;}.bubble-1 {width: 100px;height: 100px;top: -30px;left: -30px;}.bubble-2 {width: 150px;height: 150px;bottom: -50px;right: -50px;}.footer {margin-top: 10px;font-size: 14px;color: #999;}/* 閃動效果 */.flashing {animation: flash 0.2s infinite;}@keyframes flash {0% { opacity: 0.5; }50% { opacity: 1; }100% { opacity: 0.5; }}/* 所有品牌列表 */.all-brands {width: 90%;max-width: 800px;background-color: white;border-radius: 20px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);padding: 30px;margin-top: 20px;}.all-brands h2 {color: #ff4d6d;text-align: center;margin-bottom: 20px;}.brands-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 15px;}.brand-item {background-color: #fff9fb;padding: 15px;border-radius: 10px;border: 1px solid #ffccd5;}.brand-name {font-weight: bold;color: #ff4d6d;margin-bottom: 8px;}.brand-drinks {font-size: 14px;color: #666;}@media (max-width: 600px) {.container {padding: 30px 20px;width: 85%;}h1 {font-size: 24px;}.brand {font-size: 24px;}.recommendation {font-size: 16px;}.brands-grid {grid-template-columns: 1fr;}}</style>
</head>
<body><div class="container"><div class="bubble bubble-1"></div><div class="bubble bubble-2"></div><h1>今天喝什么？</h1><div class="result-container"><div class="brand" id="brand">點擊下方按鈕開始</div><div class="recommendation" id="recommendation">隨機推薦奶茶品牌和飲品</div></div><button class="btn" id="generateBtn">隨機推薦</button><div class="footer">點擊按鈕隨機獲取奶茶推薦，每天都有新發現！</div></div><div class="all-brands"><h2>所有可能隨機的奶茶品牌</h2><div class="brands-grid" id="brandsGrid"><!-- 品牌列表將通過JavaScript動態生成 --></div></div><script>// 奶茶品牌及推薦飲品數據const milkTeaData = [{ brand: "喜茶", recommendations: ["多肉葡萄", "芝芝莓莓", "滿杯紅柚", "芋泥波波", "烤黑糖波波"] },{ brand: "奈雪的茶", recommendations: ["霸氣芝士草莓", "霸氣橙子", "芋泥寶藏茶", "楊枝甘露寶藏茶", "葡萄撞撞寶藏茶"] },{ brand: "茶顏悅色", recommendations: ["幽蘭拿鐵", "聲聲烏龍", "桂花弄", "箏箏紙鳶", "蔓越闌珊"] },{ brand: "蜜雪冰城", recommendations: ["冰鮮檸檬水", "滿杯百香果", "珍珠奶茶", "草莓搖搖奶昔", "芝士奶蓋四季春"] },{ brand: "CoCo都可", recommendations: ["奶茶三兄弟", "鮮百香雙響炮", "珍珠奶茶", "青稞奶茶", "檸檬養樂多"] },{ brand: "一點點", recommendations: ["波霸奶茶", "四季春瑪奇朵", "冰淇淋紅茶", "阿華田", "葡萄柚綠"] },{ brand: "書亦燒仙草", recommendations: ["書亦燒仙草", "葡萄芋圓凍凍", "楊枝甘露", "草莓啵啵酸奶", "黑糖小芋圓奶茶"] },{ brand: "古茗", recommendations: ["大叔奶茶", "芝士葡萄", "楊枝甘露", "西瓜椰椰", "布丁芋奶露"] },{ brand: "滬上阿姨", recommendations: ["血糯米奶茶", "楊枝甘露", "葡萄酸奶金磚", "厚芋泥波波奶茶", "草莓桃桃茶"] },{ brand: "快樂檸檬", recommendations: ["巖鹽芝士奶茶", "蛋糕忌廉珍珠奶茶", "OREO曲奇奶茶", "芋圓小丸子奶茶", "檸檬菠蘿凍"] },{ brand: "益禾堂", recommendations: ["益禾烤奶", "禾風奶綠", "芋泥啵啵奶茶", "楊枝甘露", "西瓜汁"] },{ brand: "貢茶", recommendations: ["熊貓奶蓋茶", "寒天愛玉", "格雷三兄弟", "香米抹茶紅豆", "金鉆奶茶"] },{ brand: "鹿角巷", recommendations: ["黑糖鹿丸鮮奶", "小鹿出抹", "皇家九號奶茶", "白桃烏龍", "北極光"] },{ brand: "樂樂茶", recommendations: ["草莓酪酪", "葡萄酪酪", "楊枝甘露冰冰茶", "黑糖波霸臟臟茶", "玫瓏蜜瓜酪酪"] },{ brand: "瑞幸咖啡-小鹿茶", recommendations: ["大紅袍寒天牛乳茶", "隕石拿鐵", "桃桃芝士紅寶石茶", "葡萄很好喝", "西柚芝士茉香茶"] }];const brandElement = document.getElementById('brand');const recommendationElement = document.getElementById('recommendation');const generateBtn = document.getElementById('generateBtn');const brandsGrid = document.getElementById('brandsGrid');let isFlashing = false;let flashInterval;let randomizeInterval;// 初始化顯示所有品牌function displayAllBrands() {brandsGrid.innerHTML = '';milkTeaData.forEach(item => {const brandItem = document.createElement('div');brandItem.className = 'brand-item';const brandName = document.createElement('div');brandName.className = 'brand-name';brandName.textContent = item.brand;const brandDrinks = document.createElement('div');brandDrinks.className = 'brand-drinks';brandDrinks.textContent = item.recommendations.join(' · ');brandItem.appendChild(brandName);brandItem.appendChild(brandDrinks);brandsGrid.appendChild(brandItem);});}// 開始閃動效果function startFlashing() {isFlashing = true;brandElement.classList.add('flashing');recommendationElement.classList.add('flashing');// 快速切換顯示不同的品牌和推薦randomizeInterval = setInterval(() => {const randomIndex = Math.floor(Math.random() * milkTeaData.length);const randomBrand = milkTeaData[randomIndex];const randomRecIndex = Math.floor(Math.random() * randomBrand.recommendations.length);brandElement.textContent = randomBrand.brand;recommendationElement.textContent = `推薦嘗試：${randomBrand.recommendations[randomRecIndex]}`;}, 100);}// 停止閃動效果function stopFlashing() {isFlashing = false;clearInterval(randomizeInterval);brandElement.classList.remove('flashing');recommendationElement.classList.remove('flashing');// 最終確定一個隨機結果generateRecommendation();}// 隨機生成推薦function generateRecommendation() {// 隨機選擇一個品牌const randomIndex = Math.floor(Math.random() * milkTeaData.length);const selectedBrand = milkTeaData[randomIndex];// 隨機選擇該品牌的一個推薦飲品const randomRecIndex = Math.floor(Math.random() * selectedBrand.recommendations.length);const selectedRecommendation = selectedBrand.recommendations[randomRecIndex];// 更新DOMbrandElement.textContent = selectedBrand.brand;recommendationElement.textContent = `推薦嘗試：${selectedRecommendation}`;// 添加動畫效果brandElement.style.animation = 'none';recommendationElement.style.animation = 'none';void brandElement.offsetWidth; // 觸發重繪void recommendationElement.offsetWidth;brandElement.style.animation = 'fadeIn 0.5s ease';recommendationElement.style.animation = 'fadeIn 0.7s ease';}// 添加動畫樣式const style = document.createElement('style');style.textContent = `@keyframes fadeIn {from { opacity: 0; transform: translateY(10px); }to { opacity: 1; transform: translateY(0); }}`;document.head.appendChild(style);// 初始加載時顯示所有品牌displayAllBrands();// 點擊按鈕時開始或停止隨機generateBtn.addEventListener('click', function() {if (isFlashing) {stopFlashing();this.textContent = '隨機推薦';} else {startFlashing();this.textContent = '停止隨機';}});</script>
</body>
</html>
