喜迎中秋和国庆共10天假期——表达我的开心-HTML表达-育师

喜迎中秋 + 国庆共 10 天假期 —— 表达我的开心 - html 表达返回代码，需要显示倒计时增强互动，点击的时候页要有特效。

1.提示词

返回代码：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>喜迎中秋国庆 · 10天长假倒计时🎉</title> <script src="https://cdn.tailwindcss.com"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background: linear-gradient(135deg,#990000,#d62828,#ff7b00); font-family: "Microsoft Yahei", sans-serif; overflow-x: hidden; cursor: pointer; /* 整体页面完全居中 */ display: flex; align-items: center; justify-content: center; } #fireworkCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99; } .gold-text { color: #ffdd70; text-shadow: 0 0 12px rgba(255,220,100,0.7); } .count-box{ background:rgba(255,255,255,0.12); backdrop-filter: blur(8px); /* 透明边框 */ border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 20px; } @keyframes float { 0%,100%{transform: translateY(0px);} 50%{transform: translateY(-10px);} } .float-animate{ animation: float 3s ease-in-out infinite; } /* 倒计时强制一行不换行 */ .count-row { display: flex !important; flex-wrap: nowrap !important; justify-content: center; gap: 0.5rem; } </style> </head> <body> <canvas id="fireworkCanvas"></canvas> <!-- 全部内容居中容器 --> <div class="text-center px-4 max-w‑2xl float-animate text-white"> <h1 class="text-[clamp(1.8rem,5vw,3.2rem)] font-bold gold-text mb-3">🎉喜迎中秋&国庆双节🎉</h1> <h2 class="text-[clamp(1.3rem,3vw,2rem)] mb-8">快乐10天长假就要来啦！太开心啦🥳</h2> <div class="count-box p-6 md:p-8"> <div class="text-lg mb-4">距离双节假期还有</div> <!-- 倒计时一行横向 --> <div id="countdown" class="count-row text-2xl sm:text-3xl md:text-5xl font-bold"> <div class="px-2 py-2 bg-red-900/40 rounded-lg"> <span id="day">00</span> <div class="text-sm font-normal mt-1">天</div> </div> <div class="px-2 py-2 bg-red-900/40 rounded-lg"> <span id="hour">00</span> <div class="text-sm font-normal mt-1">时</div> </div> <div class="px-2 py-2 bg-red-900/40 rounded-lg"> <span id="min">00</span> <div class="text-sm font-normal mt-1">分</div> </div> <div class="px-2 py-2 bg-red-900/40 rounded-lg"> <span id="sec">00</span> <div class="text-sm font-normal mt-1">秒</div> </div> </div> <div class="mt-6 text-white/80 text-sm">✨点击屏幕任意位置释放节日烟花特效✨</div> </div> <div class="mt-8 text-lg opacity-90"> 盼星星盼月亮，期待10天美好假期，吃喝玩乐，欢度双节！🥮🇨🇳 </div> </div> <script> // 假期开始时间 const holidayStart = new Date(2026,9-1,29,0,0,0).getTime(); function updateCountDown(){ const now = Date.now(); const diff = holidayStart - now; if(diff <= 0){ document.getElementById('countdown').innerHTML = `<div class="text-4xl gold-text">🥳假期已到来！尽情狂欢！</div>`; return; } const d = Math.floor(diff/(1000*60*60*24)); const h = Math.floor((diff%(1000*60*60*24))/(1000*60*60)); const m = Math.floor((diff%(1000*60*60))/(1000*60)); const s = Math.floor((diff%(1000*60))/1000); document.getElementById('day').innerText = String(d).padStart(2,'0'); document.getElementById('hour').innerText = String(h).padStart(2,'0'); document.getElementById('min').innerText = String(m).padStart(2,'0'); document.getElementById('sec').innerText = String(s).padStart(2,'0'); } setInterval(updateCountDown,1000); updateCountDown(); // 烟花粒子 const canvas = document.getElementById('fireworkCanvas'); const ctx = canvas.getContext('2d'); let w,h; function resize(){ w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; } resize(); window.addEventListener('resize',resize); 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.radius = Math.random()*3 +1; this.color = ['#ffdd70','#ff4444','#ffaa00','#ffffff'][Math.floor(Math.random()*4)]; this.gravity = 0.06; } update(){ this.x += this.vx; this.y += this.vy; this.vy += this.gravity; this.alpha -= 0.018; } draw(){ ctx.save(); ctx.globalAlpha = this.alpha; ctx.beginPath(); ctx.arc(this.x,this.y,this.radius,0,Math.PI*2); ctx.fillStyle = this.color; ctx.fill(); ctx.restore(); } } let particles = []; document.body.addEventListener('click',(e)=>{ for(let i=0;i<80;i++){ particles.push(new Particle(e.clientX,e.clientY)); }) }) function render(){ ctx.clearRect(0,0,w,h); 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(render); } render(); </script> </body> </html>