使用deepseek制作“喝什么奶茶”随机抽签小网页

我们可以使用 DeepSeek-Vision 的大语言模型思维方式（虽然它本身是后端推理模型），但这里你是想做一个 前端网页随机抽签工具，类似“今天喝什么奶茶”，那么只需要纯 HTML + JS 即可实现“抽签”效果（无需部署大模型）——我们可以模拟“AI风格”的语气和视觉体验。

✅ 项目说明：「喝什么奶茶？」随机抽签小网页

🌟 功能：点击按钮，随机抽出一个奶茶口味 + AI风格提示语
💻 技术栈：纯 HTML + CSS + JavaScript（不依赖后端）
🎨 特色：使用类 AI 语气（模仿 deepseek 风格），简洁可部署

🧋效果截图（构思）

+----------------------------------------------------+
|  [DeepSeek-Vision] 今天喝什么奶茶？                |
|                                                    |
|  👉 建议你今天试试：「珍珠乌龙奶茶」                |
|  🌸 AI温馨提示：甜度五分，冰块少一点，更健康~       |
|                                                    |
|                     [ 再来一杯！ ]                 |
+----------------------------------------------------+

🔧 完整代码如下（可直接部署为 index.html）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>喝什么奶茶？｜AI 抽签小网页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      background: linear-gradient(to right, #fceabb, #f8b500);
      font-family: "Noto Sans SC", sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .container {
      background: white;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      text-align: center;
      max-width: 400px;
      width: 90%;
    }

    h1 {
      margin-bottom: 20px;
      font-size: 24px;
      color: #333;
    }

    .result {
      font-size: 20px;
      margin: 20px 0;
      color: #5a3e1b;
    }

    .tip {
      font-size: 16px;
      color: #777;
      margin-top: 10px;
    }

    button {
      background-color: #6b4c2f;
      color: white;
      padding: 12px 25px;
      font-size: 16px;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    button:hover {
      background-color: #4b2f1f;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🧋 DeepSeek-AI · 今天喝什么奶茶？</h1>
    <div class="result" id="milkTea">点击下方按钮，让AI为你选一杯</div>
    <div class="tip" id="aiTip"></div>
    <button onclick="drawTea()">再来一杯！</button>
  </div>

  <script>
    const teas = [
      "珍珠乌龙奶茶",
      "芋圆奶绿",
      "红豆奶茶",
      "抹茶鲜奶",
      "桂花乌龙",
      "黑糖波霸鲜奶",
      "草莓芝士奶盖",
      "杨枝甘露奶茶",
      "巧克力脆片奶茶",
      "焦糖布丁奶茶",
      "芝麻拿铁奶茶",
      "椰椰茉香奶绿",
      "白桃乌龙奶茶"
    ];

    const tips = [
      "AI建议：甜度五分，冰量少一点，口感更顺滑。",
      "贴士：今天热气大？少冰更养生~",
      "温馨提示：珍珠多多不加价哟。",
      "AI识别你今天需要一杯快乐奶茶！",
      "尝试去糖挑战？微糖也很香浓哦！",
      "天热了，记得少冰少糖别上火。",
      "这杯搭配小蛋糕效果更佳~",
      "AI感知你需要甜甜的治愈系饮料。",
      "祝你一整天好心情，从这一口开始！",
      "奶茶选好了，该点份小吃了吗？"
    ];

    function drawTea() {
      const tea = teas[Math.floor(Math.random() * teas.length)];
      const tip = tips[Math.floor(Math.random() * tips.length)];
      document.getElementById("milkTea").textContent = `👉 建议你今天试试：「${tea}」`;
      document.getElementById("aiTip").textContent = `🌸 ${tip}`;
    }
  </script>
</body>
</html>

📁 使用方法：

打开文本编辑器，将上面代码保存为 index.html。
上传至你的网站根目录，或本地打开即可使用。
可配合 QQ浏览器小程序、微信小程序外壳、或打包为 PWA 页面使用。

🧠 想做得更像 DeepSeek-AI？

你可以进一步：

使用 AI头像 + AI气泡对话样式
接入真实 AI 生成建议（用 OpenAI / DeepSeek Cloud API）
使用语音播报插件
存储“今日喝过”历史在 localStorage

好的！我们来为你的《喝什么奶茶》AI小网页 增加三个功能：

✅ 功能升级清单：

语音朗读奶茶建议 🗣️
淡入动画显示推荐 ✨
历史记录（保存在浏览器 localStorage） 📝

🧋升级后最终效果：

点“再来一杯！” → 随机奶茶+AI提示 → 自动语音播报 → 推荐文字淡入显示
推荐历史可持久保存（即使刷新也不丢）

🔧 完整增强版 HTML 代码如下（直接保存为 `index.html` 即可使用）：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>喝什么奶茶？｜AI抽签</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      background: linear-gradient(to right, #fceabb, #f8b500);
      font-family: "Noto Sans SC", sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .container {
      background: white;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      text-align: center;
      max-width: 450px;
      width: 90%;
    }

    h1 {
      font-size: 22px;
      color: #333;
    }

    .result {
      font-size: 20px;
      margin: 20px 0 10px;
      color: #5a3e1b;
      opacity: 0;
      transition: opacity 0.8s ease;
    }

    .result.show {
      opacity: 1;
    }

    .tip {
      font-size: 16px;
      color: #777;
      margin-bottom: 20px;
      opacity: 0;
      transition: opacity 0.8s ease;
    }

    .tip.show {
      opacity: 1;
    }

    button {
      background-color: #6b4c2f;
      color: white;
      padding: 12px 25px;
      font-size: 16px;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    button:hover {
      background-color: #4b2f1f;
    }

    .history {
      text-align: left;
      margin-top: 20px;
      font-size: 14px;
      color: #555;
      max-height: 120px;
      overflow-y: auto;
    }

    .history strong {
      color: #000;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🧋 DeepSeek-AI · 今天喝什么奶茶？</h1>
    <div class="result" id="milkTea">点击下方按钮，让AI为你选一杯</div>
    <div class="tip" id="aiTip"></div>
    <button onclick="drawTea()">再来一杯！</button>
    <div class="history" id="historyBox">
      <strong>历史记录：</strong>
      <ul id="historyList"></ul>
    </div>
  </div>

  <script>
    const teas = [
      "珍珠乌龙奶茶", "芋圆奶绿", "红豆奶茶", "抹茶鲜奶", "桂花乌龙",
      "黑糖波霸鲜奶", "草莓芝士奶盖", "杨枝甘露奶茶", "巧克力脆片奶茶",
      "焦糖布丁奶茶", "芝麻拿铁奶茶", "椰椰茉香奶绿", "白桃乌龙奶茶"
    ];

    const tips = [
      "AI建议：甜度五分，冰量少一点，口感更顺滑。",
      "贴士：今天热气大？少冰更养生~",
      "温馨提示：珍珠多多不加价哟。",
      "AI识别你今天需要一杯快乐奶茶！",
      "尝试去糖挑战？微糖也很香浓哦！",
      "天热了，记得少冰少糖别上火。",
      "这杯搭配小蛋糕效果更佳~",
      "AI感知你需要甜甜的治愈系饮料。",
      "祝你一整天好心情，从这一口开始！",
      "奶茶选好了，该点份小吃了吗？"
    ];

    const teaBox = document.getElementById("milkTea");
    const tipBox = document.getElementById("aiTip");
    const historyList = document.getElementById("historyList");

    // 加载历史记录
    window.onload = () => {
      const history = JSON.parse(localStorage.getItem("milkTeaHistory")) || [];
      history.forEach(item => {
        const li = document.createElement("li");
        li.textContent = item;
        historyList.appendChild(li);
      });
    };

    function drawTea() {
      const tea = teas[Math.floor(Math.random() * teas.length)];
      const tip = tips[Math.floor(Math.random() * tips.length)];

      teaBox.textContent = `👉 建议你今天试试：「${tea}」`;
      tipBox.textContent = `🌸 ${tip}`;

      // 添加动画
      teaBox.classList.remove("show");
      tipBox.classList.remove("show");
      setTimeout(() => {
        teaBox.classList.add("show");
        tipBox.classList.add("show");
      }, 100);

      // 朗读文字
      const speakText = `今天的推荐是：${tea}。${tip}`;
      speak(speakText);

      // 添加到历史记录
      const historyItem = `${new Date().toLocaleTimeString()} - ${tea}`;
      const li = document.createElement("li");
      li.textContent = historyItem;
      historyList.insertBefore(li, historyList.firstChild);

      // 存储在 localStorage（最多保存10条）
      let history = JSON.parse(localStorage.getItem("milkTeaHistory")) || [];
      history.unshift(historyItem);
      if (history.length > 10) history = history.slice(0, 10);
      localStorage.setItem("milkTeaHistory", JSON.stringify(history));
    }

    function speak(text) {
      if ('speechSynthesis' in window) {
        const utter = new SpeechSynthesisUtterance(text);
        utter.lang = 'zh-CN';
        utter.rate = 1;
        speechSynthesis.speak(utter);
      }
    }
  </script>
</body>
</html>

✅ 新功能简介

功能	技术实现
🎤 语音朗读	`SpeechSynthesisUtterance` API
✨ 淡入动画效果	`opacity + transition` + class 控制
🧾 历史记录保存	`localStorage` 存储与读取

📱 使用说明

手机/浏览器访问后点击按钮即可；
若不支持语音朗读（某些浏览器或设备），将自动跳过；
自动保存抽签历史，刷新也能保留。

使用deepseek制作“喝什么奶茶”随机抽签小网页

✅ 项目说明：「喝什么奶茶？」随机抽签小网页

🧋效果截图（构思）

🔧 完整代码如下（可直接部署为 index.html）

📁 使用方法：

🧠 想做得更像 DeepSeek-AI？

✅ 功能升级清单：

🧋升级后最终效果：

🔧 完整增强版 HTML 代码如下（直接保存为 `index.html` 即可使用）：

✅ 新功能简介

📱 使用说明

lichongyang

发表回复取消回复

Latest posts

Text widget

使用deepseek制作“喝什么奶茶”随机抽签小网页

✅ 项目说明：「喝什么奶茶？」随机抽签小网页

🧋效果截图（构思）

🔧 完整代码如下（可直接部署为 index.html）

📁 使用方法：

🧠 想做得更像 DeepSeek-AI？

✅ 功能升级清单：

🧋升级后最终效果：

🔧 完整增强版 HTML 代码如下（直接保存为 index.html 即可使用）：

✅ 新功能简介

📱 使用说明

lichongyang

发表回复 取消回复

Latest posts

Text widget

🔧 完整增强版 HTML 代码如下（直接保存为 `index.html` 即可使用）：

发表回复取消回复