DeepSeek 奶茶随机推荐器 🧋🎲
以下是一个有趣又实用的随机奶茶推荐器，专为选择困难症设计！每次点击都会生成全新的奶茶推荐，包含口味、配料、温度等完整组合。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeepSeek 奶茶随机推荐器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #ffafbd, #ffc3a0);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
max-width: 800px;
width: 100%;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-align: center;
padding: 40px;
}
header {
margin-bottom: 30px;
}
h1 {
color: #e84393;
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.subtitle {
color: #6c5ce7;
font-size: 1.2rem;
margin-bottom: 30px;
}
.milk-tea-card {
background: linear-gradient(to right, #f8f9fa, #e9ecef);
border-radius: 15px;
padding: 30px;
margin: 30px 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.milk-tea-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}
.tea-name {
font-size: 2.5rem;
color: #e84393;
margin-bottom: 20px;
font-weight: bold;
}
.details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
text-align: left;
margin-top: 20px;
}
.detail-item {
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.detail-title {
font-weight: bold;
color: #6c5ce7;
margin-bottom: 5px;
font-size: 1.1rem;
}
.detail-value {
font-size: 1.3rem;
color: #2d3436;
}
.flavor-desc {
font-style: italic;
margin-top: 20px;
padding: 15px;
background: rgba(108, 92, 231, 0.1);
border-radius: 10px;
color: #2d3436;
line-height: 1.6;
font-size: 1.1rem;
}
.generate-btn {
background: linear-gradient(to right, #6c5ce7, #e84393);
color: white;
border: none;
padding: 15px 40px;
font-size: 1.3rem;
border-radius: 50px;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);
}
.generate-btn:hover {
transform: scale(1.05);
box-shadow: 0 7px 20px rgba(108, 92, 231, 0.6);
}
.generate-btn:active {
transform: scale(0.98);
}
.bubble {
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: float 8s infinite ease-in-out;
z-index: -1;
}
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); }
25% { transform: translateY(-20px) translateX(10px); }
50% { transform: translateY(-10px) translateX(20px); }
75% { transform: translateY(10px) translateX(-10px); }
}
footer {
margin-top: 30px;
color: #636e72;
font-size: 0.9rem;
}
/* 响应式设计 */
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 2rem;
}
.tea-name {
font-size: 1.8rem;
}
.generate-btn {
padding: 12px 30px;
font-size: 1.1rem;
}
}
</style>
</head>
<body>
<!-- 背景泡泡 -->
<div class="bubble" style="width: 80px; height: 80px; top: 10%; left: 15%;"></div>
<div class="bubble" style="width: 120px; height: 120px; top: 70%; left: 80%;"></div>
<div class="bubble" style="width: 60px; height: 60px; top: 40%; left: 5%;"></div>
<div class="bubble" style="width: 100px; height: 100px; top: 20%; left: 85%;"></div>
<div class="container">
<header>
<h1>🧋 DeepSeek 奶茶推荐器</h1>
<p class="subtitle">告别选择困难症！让AI为你挑选今日专属奶茶</p>
</header>
<div class="milk-tea-card">
<div class="tea-name" id="teaName">茉莉奶绿</div>
<div class="details-grid">
<div class="detail-item">
<div class="detail-title">基底茶</div>
<div class="detail-value" id="baseTea">茉莉绿茶</div>
</div>
<div class="detail-item">
<div class="detail-title">奶类</div>
<div class="detail-value" id="milkType">鲜奶</div>
</div>
<div class="detail-item">
<div class="detail-title">甜度</div>
<div class="detail-value" id="sugarLevel">微糖</div>
</div>
<div class="detail-item">
<div class="detail-title">温度</div>
<div class="detail-value" id="temperature">少冰</div>
</div>
<div class="detail-item">
<div class="detail-title">主配料</div>
<div class="detail-value" id="mainTopping">茉莉茶冻</div>
</div>
<div class="detail-item">
<div class="detail-title">特色配料</div>
<div class="detail-value" id="specialTopping">桂花晶球</div>
</div>
</div>
<div class="flavor-desc" id="flavorDesc">
清新茉莉花香与鲜奶的完美融合，微糖少冰保留茶香本质。茉莉茶冻带来Q弹口感，桂花晶球增添层次感，是夏日解腻的绝佳选择！
</div>
</div>
<button class="generate-btn" id="generateBtn">🎲 生成新推荐</button>
<footer>
<p>每杯推荐都由DeepSeek精心生成 · 今日已推荐 <span id="counter">1</span> 杯</p>
</footer>
</div>
<script>
// 奶茶数据库
const teaData = {
baseTeas: [
"茉莉绿茶", "乌龙茶", "红茶", "四季春茶", "铁观音",
"普洱茶", "阿萨姆红茶", "桂花乌龙", "蜜香红茶", "白桃乌龙"
],
milkTypes: [
"鲜奶", "燕麦奶", "椰奶", "豆奶", "杏仁奶",
"厚乳", "冰博克", "芝士奶盖", "麻薯奶", "椰云奶盖"
],
sugarLevels: [
"无糖", "微糖", "少糖", "半糖", "标准糖", "七分糖", "全糖"
],
temperatures: [
"热饮", "常温", "去冰", "少冰", "正常冰", "多冰"
],
mainToppings: [
"珍珠", "椰果", "布丁", "仙草", "芋圆",
"红豆", "燕麦", "茶冻", "麻薯", "西米",
"烧仙草", "青稞", "薏仁", "爱玉", "寒天"
],
specialToppings: [
"奶霜", "奥利奥碎", "坚果碎", "焦糖酱", "巧克力酱",
"玫瑰花瓣", "桂花晶球", "草莓爆珠", "芒果粒", "抹茶粉",
"可可粉", "肉桂粉", "海盐奶盖", "跳跳糖", "棉花糖"
],
teaNames: [
"云顶茉莉", "乌龙椰椰", "红玉厚乳", "四季春韵", "白桃雪顶",
"普洱椰云", "桂花乌龙奶", "蜜香麻薯", "铁观音奶霜", "阿萨姆波波",
"抹茶椰椰冻", "黑糖珍珠鲜奶", "芋泥麻薯厚乳", "草莓云顶乌龙", "芒果椰果绿研"
],
descriptions: [
"清新茶香与奶香的完美平衡，搭配独特配料带来多层次口感体验",
"香气四溢的茶底搭配绵密奶泡，每一口都是味蕾的惊喜之旅",
"创意搭配带来意想不到的和谐口感，既有传统韵味又有现代创新",
"精心配比的茶奶比例，保留茶香本质同时带来顺滑口感",
"特色配料与茶底的奇妙碰撞，创造出令人难忘的独特风味组合"
]
};
// 获取DOM元素
const teaNameEl = document.getElementById('teaName');
const baseTeaEl = document.getElementById('baseTea');
const milkTypeEl = document.getElementById('milkType');
const sugarLevelEl = document.getElementById('sugarLevel');
const temperatureEl = document.getElementById('temperature');
const mainToppingEl = document.getElementById('mainTopping');
const specialToppingEl = document.getElementById('specialTopping');
const flavorDescEl = document.getElementById('flavorDesc');
const generateBtn = document.getElementById('generateBtn');
const counterEl = document.getElementById('counter');
let counter = 1;
// 随机选择函数
function getRandomItem(array) {
return array[Math.floor(Math.random() * array.length)];
}
// 生成奶茶描述
function generateDescription(tea) {
const descriptors = [
"清新", "浓郁", "香醇", "绵密", "顺滑",
"层次丰富", "回味悠长", "创意十足", "经典风味", "独特"
];
const feelDescriptors = [
"带来愉悦的味蕾体验", "每一口都是享受", "让人回味无穷",
"是味蕾的惊喜之旅", "带来满满的幸福感", "瞬间点亮心情"
];
const descTemplate = [
`{descriptor1}的${tea.baseTea}茶底与{descriptor2}${tea.milkType}完美融合，${tea.sugarLevel}${tea.temperature}保留茶香本质。${tea.mainTopping}带来Q弹口感，${tea.specialTopping}增添层次感，{feel}！`,
`以{descriptor1}${tea.baseTea}为基底，加入{descriptor2}${tea.milkType}，${tea.sugarLevel}${tea.temperature}凸显茶香。${tea.mainTopping}与${tea.specialTopping}的创意组合{feel}，是今日的绝佳选择！`,
`{descriptor1}${tea.baseTea}搭配{descriptor2}${tea.milkType}，${tea.sugarLevel}${tea.temperature}恰到好处。${tea.mainTopping}的嚼劲与${tea.specialTopping}的惊喜口感{feel}，带来全新奶茶体验！`,
`精心调配的${tea.baseTea}茶底与{descriptor1}${tea.milkType}相得益彰，${tea.sugarLevel}${tea.temperature}平衡甜度。${tea.mainTopping}和${tea.specialTopping}的搭配{feel}，每一口都是享受！`
];
const template = getRandomItem(descTemplate);
const desc = template
.replace('{descriptor1}', getRandomItem(descriptors))
.replace('{descriptor2}', getRandomItem(descriptors))
.replace('{feel}', getRandomItem(feelDescriptors));
return desc;
}
// 生成随机奶茶
function generateMilkTea() {
return {
name: getRandomItem(teaData.teaNames),
baseTea: getRandomItem(teaData.baseTeas),
milkType: getRandomItem(teaData.milkTypes),
sugarLevel: getRandomItem(teaData.sugarLevels),
temperature: getRandomItem(teaData.temperatures),
mainTopping: getRandomItem(teaData.mainToppings),
specialTopping: getRandomItem(teaData.specialToppings),
description: getRandomItem(teaData.descriptions)
};
}
// 更新UI显示
function updateDisplay(tea) {
teaNameEl.textContent = tea.name;
baseTeaEl.textContent = tea.baseTea;
milkTypeEl.textContent = tea.milkType;
sugarLevelEl.textContent = tea.sugarLevel;
temperatureEl.textContent = tea.temperature;
mainToppingEl.textContent = tea.mainTopping;
specialToppingEl.textContent = tea.specialTopping;
flavorDescEl.textContent = generateDescription(tea);
// 更新计数器
counter++;
counterEl.textContent = counter;
// 添加动画效果
teaNameEl.style.animation = 'none';
setTimeout(() => {
teaNameEl.style.animation = 'fadeIn 0.5s';
}, 10);
}
// 添加动画样式
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);
// 初始生成
updateDisplay(generateMilkTea());
// 按钮事件
generateBtn.addEventListener('click', () => {
updateDisplay(generateMilkTea());
// 按钮动画
generateBtn.textContent = "🎲 生成中...";
setTimeout(() => {
generateBtn.textContent = "🎲 生成新推荐";
}, 500);
});
</script>
</body>
</html>
功能亮点 ✨
-
完整奶茶组合：
- 6大核心元素：茶底、奶类、甜度、温度、主配料、特色配料
- 70+种食材组合，超过500万种可能搭配
-
智能风味描述：
- 自动生成符合搭配的创意描述
- 每次生成都有独特的风味评价
-
视觉享受：
- 渐变柔美配色，奶茶主题风格
- 浮动气泡背景，增加趣味性
- 卡片悬停动画，提升交互体验
-
实用功能：
- 点击计数器记录你的选择历程
- 响应式设计，手机电脑都能用
使用指南 📖
- 打开页面自动生成第一杯推荐奶茶
- 点击"生成新推荐"按钮获取新搭配
- 查看完整的奶茶配置和风味描述
- 尝试不同搭配，找到你的最爱
奶茶哲学 🧋
“人生就像一杯随机奶茶，你永远不知道下一杯会带来什么惊喜。”
“没有不好的奶茶，只有还没被发现的美好搭配。”
这个推荐器不仅能解决你的选择困难症，还能激发你尝试新口味的勇气！每次点击都是一次全新的味觉冒险～
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
