伏案耕书岁月长，少年逐梦自昂扬。 心随墨海寻真趣，志向书山揽旭光 。 暂得佳期舒倦眼，仍怀勤学赴新章。 双节休沐从容度，收假归来意气扬。
通过豆包创建的完成方法步骤：
1. 提示词
喜迎中秋 + 国庆共 10 天假期 —— 表达我的开心 - html 表达 返回代码，需要显示倒计时增强互动，点击的时候页要有特效。
返回代码：
<!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; } body{ min-height: 100vh; background: linear-gradient(135deg,#ff3b3b,#ff8822,#d62828); font-family: "Microsoft Yahei",sans-serif; display:flex; flex-direction: column; align-items:center; justify-content:center; color:#fff; text-align:center; overflow:hidden; cursor: pointer; } .container{ padding:40px 20px; animation: scaleIn 1.2s ease-out; z-index: 10; position: relative; } h1{ font-size: clamp(2rem,6vw,3.5rem); margin-bottom: 20px; text-shadow: 2px 2px 8px rgba(0,0,0,0.3); } .emoji{ font-size: 50px; margin:20px 0; } .countdown-wrap{ margin: 30px 0; padding: 20px; background-color: rgba(255,255,255,0.15); border-radius: 16px; } .count-title{ font-size: clamp(1.3rem,4vw,1.8rem); margin-bottom:15px; } .count-num{ font-size: clamp(1.8rem,5vw,2.8rem); font-weight:bold; letter-spacing: 3px; } .day-text{ font-size: clamp(1.6rem,5vw,2.6rem); margin:25px 0; font-weight:bold; letter-spacing:4px; } .happy{ font-size: clamp(1.3rem,4vw,2rem); margin-top:30px; animation: bounce 1s infinite alternate; } @keyframes scaleIn{ 0%{transform:scale(0.4);opacity:0;} 100%{transform:scale(1);opacity:1;} } @keyframes bounce{ from{transform: translateY(0px);} to{transform: translateY(-10px);} } /* 飘落装饰 */ .fall{ position:fixed; top:-60px; color:#ffdd44; font-size:30px; animation: fall 6s linear infinite; z-index:0; } @keyframes fall{ 0%{transform:translateY(0) rotate(0deg);opacity:1;} 100%{transform:translateY(110vh) rotate(360deg);opacity:0;} } canvas{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; } </style> </head> <body> <div class="container"> <h1>🥮喜迎中秋 · 欢庆国庆🇨🇳</h1> <div class="emoji">🎉🎊✨</div> <div class="countdown-wrap"> <div class="count-title">距离国庆节假期还有</div> <div class="count-num" id="countdown">--天 --时 --分 --秒</div> </div> <div class="day-text">国庆假期一共7天！</div> <div class="happy">太开心啦！终于可以好好放松游玩啦🥳</div> </div> <canvas id="fireCanvas"></canvas> <script> // 国庆节：2026‑10‑01 const holidayStart = new Date(2026, 9, 1, 0, 0, 0); function updateCountDown(){ const now = new Date().getTime(); const target = holidayStart.getTime(); let diff = target - now; if(diff <= 0){ document.getElementById('countdown').innerText = '🎉假期已开启！'; return; } const day = Math.floor(diff / (1000*60*60*24)); diff = diff % (1000*60*60*24); const hour = Math.floor(diff / (1000*60*60)); diff = diff % (1000*60*60); const min = Math.floor(diff / (1000*60)); diff = diff % (1000*60); const sec = Math.floor(diff / 1000); document.getElementById('countdown').innerText = `${day}天 ${hour}时 ${min}分 ${sec}秒`; } setInterval(updateCountDown, 1000); updateCountDown(); // ========== 飘落元素 ========== const emojis = ['✨','⭐','🎈','🏮']; function createFall(){ const el = document.createElement('div'); el.classList.add('fall'); el.innerText = emojis[Math.floor(Math.random()*emojis.length)]; el.style.left = Math.random()*100+'vw'; el.style.animationDuration = (4+Math.random()*4)+'s'; document.body.appendChild(el); setTimeout(()=>el.remove(),8000); } setInterval(createFall,400); // ========== 点击烟花粒子特效 ========== const canvas = document.getElementById('fireCanvas'); const ctx = canvas.getContext('2d'); let particles = []; function resizeCanvas(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); class Particle{ constructor(x,y){ this.x = x; this.y = y; const angle = Math.random() * Math.PI * 2; const speed = Math.random()*4 + 2; this.vx = Math.cos(angle)*speed; this.vy = Math.sin(angle)*speed; this.alpha = 1; this.color = ['#ffdd00','#ff4444','#ffffff','#ffaa00'][Math.floor(Math.random()*4)]; this.radius = Math.random()*3 +1; } update(){ this.x += this.vx; this.y += this.vy; this.vy += 0.05; this.alpha -= 0.015; } draw(){ ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2); ctx.fillStyle = this.color; ctx.globalAlpha = this.alpha; ctx.fill(); ctx.globalAlpha=1; } } document.addEventListener('click', (e)=>{ for(let i=0; i< 80; i++){ particles.push(new Particle(e.clientX, e.clientY)); } }) function animate(){ ctx.clearRect(0,0,canvas.width,canvas.height); for(let i = particles.length - 1; i >= 0; i--){ const p = particles[i]; p.update(); p.draw(); if(p.alpha <= 0){ particles.splice(i, 1); } } requestAnimationFrame(animate); } animate(); </script> </body> </html>
2. 展示代码效果
创建文本文档
显示文件扩展名
