当前位置：首页 > ops >正文

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

ops 2025/6/29 21:29:23

教程很简单，如下操作

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>

查看全文

http://www.xdnf.cn/news/14700.html