当前位置：首页 > news >正文
DeepSeek今天喝什么随机奶茶推荐器

news 来源：原创 2025/6/26 0:30:36
用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>
相关文章：
