教程很简单，如下操作

新建文本文档，命名为奶茶.txt
打开deepseek，发送下面这段提示词：用html5帮我生成一个喝什么奶茶的网页，点击按钮随机生成奶茶品牌等，包括喜茶等众多常见的奶茶品牌如果不满意还可以随机再次生成，并且ui界面要美观，随机推荐的时候要有随机的闪动的效果；当用户点击随机推荐时候再停止；另外在下方显示出所有品牌的奶茶。

3. 保存后将后缀改为.html，双击打开运行。

4. 看下效果

源码如下，大家可以根据自己的兴趣改一改，娱乐一下

<!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> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }

复制代码

     body {
         background: linear-gradient(135deg, #f9e0db 0%, #f5d5d0 100%);
         min-height: 100vh;
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 20px;
         color: #5c3b2f;
     }
     
     .container {
         max-width: 800px;
         width: 100%;
         background-color: rgba(255, 255, 255, 0.9);
         border-radius: 20px;
         box-shadow: 0 10px 30px rgba(92, 59, 47, 0.2);
         padding: 30px;
         margin-top: 30px;
     }
     
     header {
         text-align: center;
         margin-bottom: 30px;
     }
     
     h1 {
         font-size: 2.5rem;
         color: #e67e7a;
         margin-bottom: 10px;
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
     }
     
     .subtitle {
         font-size: 1.2rem;
         color: #8d6e63;
     }
     
     .recommendation-section {
         display: flex;
         flex-direction: column;
         align-items: center;
         margin-bottom: 40px;
     }
     
     .result-box {
         width: 100%;
         height: 150px;
         background: linear-gradient(to right, #f8e5d6, #f9d8d3);
         border-radius: 15px;
         display: flex;
         justify-content: center;
         align-items: center;
         margin-bottom: 25px;
         box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
         position: relative;
         overflow: hidden;
     }
     
     .result-text {
         font-size: 2.5rem;
         font-weight: bold;
         color: #5c3b2f;
         text-align: center;
         padding: 10px 20px;
         transition: all 0.3s ease;
     }
     
     .blinking {
         animation: blink 0.1s infinite alternate;
     }
     
     @keyframes blink {
         from { opacity: 1; transform: scale(1); }
         to { opacity: 0.7; transform: scale(1.05); }
     }
     
     .btn {
         background: linear-gradient(to right, #e67e7a, #d35454);
         color: white;
         border: none;
         padding: 15px 40px;
         font-size: 1.2rem;
         border-radius: 50px;
         cursor: pointer;
         transition: all 0.3s ease;
         box-shadow: 0 5px 15px rgba(230, 126, 122, 0.4);
     }
     
     .btn:hover {
         transform: translateY(-3px);
         box-shadow: 0 8px 20px rgba(230, 126, 122, 0.6);
     }
     
     .btn:active {
         transform: translateY(1px);
     }
     
     .all-brands {
         margin-top: 30px;
     }
     
     .section-title {
         font-size: 1.5rem;
         color: #e67e7a;
         margin-bottom: 15px;
         padding-bottom: 10px;
         border-bottom: 2px dashed #f0c9c6;
         text-align: center;
     }
     
     .brands-container {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
         gap: 15px;
     }
     
     .brand-item {
         background-color: #f8f0ec;
         padding: 12px;
         border-radius: 10px;
         text-align: center;
         font-weight: 500;
         box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
         transition: all 0.2s ease;
     }
     
     .brand-item:hover {
         transform: translateY(-3px);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         background-color: #f9e0db;
     }
     
     .highlight {
         background-color: #f9d8d3;
         box-shadow: 0 0 15px rgba(230, 126, 122, 0.5);
         transform: scale(1.05);
     }
     
     footer {
         margin-top: 30px;
         text-align: center;
         color: #8d6e63;
         font-size: 0.9rem;
     }
     
     @media (max-width: 600px) {
         h1 {
             font-size: 2rem;
         }
         
         .result-text {
             font-size: 2rem;
         }
         
         .brands-container {
             grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
         }
     }
 </style>

</head> <body>

今天喝什么？

点击按钮，让命运决定你的奶茶选择

复制代码

     <div class="recommendation-section">
         <div class="result-box">
             <div class="result-text" id="result">点击下方按钮开始</div>
         </div>
         <button class="btn" id="random-btn">随机推荐</button>
     </div>
     
     <div class="all-brands">
         <h2 class="section-title">所有奶茶品牌</h2>
         <div class="brands-container" id="brands-container">
             <!-- 品牌列表将通过JS动态生成 -->
         </div>
     </div>
 </div>
 
 <footer>
     <p>© 2023 奶茶推荐器 | 每天一杯奶茶，生活更美好</p>
 </footer>

 <script>
     // 中国常见奶茶品牌列表
     const milkTeaBrands = [
         "喜茶", "奈雪的茶", "一点点", "CoCo都可", "茶颜悦色",
         "蜜雪冰城", "书亦烧仙草", "古茗", "益禾堂", "乐乐茶",
         "沪上阿姨", "快乐柠檬", "鹿角巷", "KOI Thé", "贡茶",
         "厝内小眷村", "茶百道", "悸动烧仙草", "伏见桃山", "SEVENBUS",
         "ARTEASG", "LINLEE", "阿水大杯茶", "吾饮良品", "黑泷堂",
         "新时沏", "巡茶", "本宫的茶", "茶理宜世", "快乐番薯"
     ];
     
     const resultElement = document.getElementById('result');
     const randomBtn = document.getElementById('random-btn');
     const brandsContainer = document.getElementById('brands-container');
     let isRandomizing = false;
     let randomInterval;
     
     // 初始化品牌列表
     function initBrands() {
         brandsContainer.innerHTML = '';
         milkTeaBrands.forEach(brand => {
             const brandItem = document.createElement('div');
             brandItem.className = 'brand-item';
             brandItem.textContent = brand;
             brandsContainer.appendChild(brandItem);
         });
     }
     
     // 随机选择奶茶品牌
     function getRandomBrand() {
         const randomIndex = Math.floor(Math.random() * milkTeaBrands.length);
         return milkTeaBrands[randomIndex];
     }
     
     // 开始随机选择动画
     function startRandomizing() {
         if (isRandomizing) return;
         
         isRandomizing = true;
         randomBtn.textContent = '停止';
         resultElement.classList.add('blinking');
         
         // 移除之前的高亮
         document.querySelectorAll('.brand-item').forEach(item => {
             item.classList.remove('highlight');
         });
         
         // 快速切换品牌
         randomInterval = setInterval(() => {
             const randomBrand = getRandomBrand();
             resultElement.textContent = randomBrand;
         }, 80);
         
         // 设置随机停止时间（1.5-3秒）
         const stopTime = 1500 + Math.random() * 1500;
         setTimeout(stopRandomizing, stopTime);
     }
     
     // 停止随机选择
     function stopRandomizing() {
         if (!isRandomizing) return;
         
         clearInterval(randomInterval);
         isRandomizing = false;
         randomBtn.textContent = '再试一次';
         resultElement.classList.remove('blinking');
         
         // 高亮显示最终选择的品牌
         const finalBrand = resultElement.textContent;
         const brandItems = document.querySelectorAll('.brand-item');
         brandItems.forEach(item => {
             if (item.textContent === finalBrand) {
                 item.classList.add('highlight');
                 // 滚动到高亮元素
                 item.scrollIntoView({ behavior: 'smooth', block: 'center' });
             }
         });
     }
     
     // 按钮点击事件
     randomBtn.addEventListener('click', () => {
         if (isRandomizing) {
             stopRandomizing();
         } else {
             startRandomizing();
         }
     });
     
     // 初始化页面
     window.onload = initBrands;
 </script>

</body> </html>

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