教程很简单，如下操作
1. 新建文本文档，命名为奶茶.txt
2. 打开deepseek，发送下面这段提示词：用html5帮我生成一个喝什么奶茶的网页，点击按钮随机生成奶茶品牌等，包括喜茶等众多常见的奶茶品牌如果不满意还可以随机再次生成，并且ui界面要美观，随机推荐的时候要有随机的闪动的效果；当用户点击随机推荐时候再停止；另外在下方显示出所有品牌的奶茶。
3. 保存后将后缀改为.html，双击打开运行。
4. 看下效果
5. 源码如下，大家可以根据自己的兴趣改一改，娱乐一下
<!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="container">
<header>
<h1>今天喝什么？</h1>
<p class="subtitle">点击按钮，让命运决定你的奶茶选择</p>
</header>
<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>