南阳公司做网站,代做网站怎么进行域名备案,泰安企业建站公司服务,帮传销做网站会违法吗教程很简单#xff0c;如下操作
1. 新建文本文档#xff0c;命名为奶茶.txt
2. 打开deepseek#xff0c;发送下面这段提示词#xff1a;用html5帮我生成一个喝什么奶茶的网页#xff0c;点击按钮随机生成奶茶品牌等#xff0c;包括喜茶等众多常见的奶茶品牌如果不满意还…教程很简单如下操作
1. 新建文本文档命名为奶茶.txt
2. 打开deepseek发送下面这段提示词用html5帮我生成一个喝什么奶茶的网页点击按钮随机生成奶茶品牌等包括喜茶等众多常见的奶茶品牌如果不满意还可以随机再次生成并且ui界面要美观随机推荐的时候要有随机的闪动的效果当用户点击随机推荐时候再停止另外在下方显示出所有品牌的奶茶。
3. 保存后将后缀改为.html双击打开运行。
4. 看下效果 5. 源码如下大家可以根据自己的兴趣改一改娱乐一下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title今天喝什么奶茶随机推荐器/titlestyle* {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
bodydiv classcontainerheaderh1今天喝什么/h1p classsubtitle点击按钮让命运决定你的奶茶选择/p/headerdiv classrecommendation-sectiondiv classresult-boxdiv classresult-text idresult点击下方按钮开始/div/divbutton classbtn idrandom-btn随机推荐/button/divdiv classall-brandsh2 classsection-title所有奶茶品牌/h2div classbrands-container idbrands-container!-- 品牌列表将通过JS动态生成 --/div/div/divfooterp© 2023 奶茶推荐器 | 每天一杯奶茶生活更美好/p/footerscript// 中国常见奶茶品牌列表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
