终于盼来了中秋国庆双节相逢足足十天假期内心满是抑制不住的欢喜忙碌许久总算可以暂时卸下压力抛开工作的琐碎。可以好好放松休憩约上亲友相聚闲谈或是出门走走看风景。满心雀跃期待尽情享受这份难得的闲暇时光好好拥抱属于自己的快乐假日。通过豆包创建的完成方法步骤1.提示词喜迎中秋 国庆共 10 天假期 —— 表达我的开心 - html 表达 返回代码需要显示倒计时增强互动点击的时候页要有特效。返回代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title喜迎中秋国庆10天假期/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; /* 多彩喜庆渐变背景 */ background: linear-gradient(135deg, #d62828, #ff9500, #992e99, #0088cc, #e63946); background-size: 400% 400%; animation: bgFlow 8s ease infinite; font-family: Microsoft YaHei, sans-serif; color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; } keyframes bgFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .wrap { text-align: center; padding: 20px; z-index: 10; } h1 { font-size: clamp(1.8rem, 7vw, 3.5rem); text-shadow: 0 4px 15px rgba(0,0,0,0.4); margin-bottom: 16px; } .tip-text { font-size: clamp(1rem,3vw,1.6rem); margin-bottom: 24px; } .countdown-box { background: rgba(255,255,255,0.25); border: 2px solid #fff; border-radius: 18px; padding: 24px 30px; display: inline-block; margin-bottom: 24px; box-shadow: 0 0 25px rgba(255,255,255,0.35); } .count-title { font-size: 1.2rem; margin-bottom:12px; } .time-num { font-size: clamp(1.6rem,6vw,3rem); font-weight:bold; letter-spacing:4px; } .click-hint { font-size:0.95rem; opacity:0.9; margin-top:10px; } .happy-desc { font-size: 1.4rem; margin-top:20px; } /* 点击礼花粒子 */ .firework { position: absolute; pointer-events: none; border-radius:50%; animation: fireAni 0.7s ease-out forwards; } keyframes fireAni { 0% {transform: scale(0); opacity:1;} 100% {transform: scale(2.8); opacity:0;} } /* 飘落碎片 */ .fall-item { position:absolute; color:#fff; animation: fall 7s linear infinite; } keyframes fall { 0% {transform: translateY(-40px) rotate(0deg); opacity:1;} 100% {transform: translateY(100vh) rotate(360deg); opacity:0;} } /style /head body div classwrap h1喜迎中秋 国庆/h1 div classtip-text共 10 天假期太开心啦/div div classcountdown-box div classcount-title距离假期还有/div div classtime-num idcountDom--天 --时 --分 --秒/div /div div classclick-hint点击页面释放节日特效/div div classhappy-desc满心期待坐等放假/div /div script // 假期开始时间 const targetDateStr 2026-10-01 00:00:00; const countDom document.getElementById(countDom); function updateCountdown(){ const target new Date(targetDateStr).getTime(); const now Date.now(); const diff target - now; if(diff 0){ countDom.innerText ✅假期已开启尽情玩耍; return; } const day Math.floor(diff / (1000*60*60*24)); const hour Math.floor((diff % (1000*60*60*24)) / (1000*60*60)); const min Math.floor((diff % (1000*60*60)) / (1000*60)); const sec Math.floor((diff % (1000*60)) / 1000); countDom.innerText ${day}天 ${hour}时 ${min}分 ${sec}秒; } setInterval(updateCountdown,1000); updateCountdown(); // 点击页面礼花特效 document.body.addEventListener(click,function(e){ const colors [#ffd700,#ff4444,#ffffff,#ff9500,#ff2e63,#4cd964,#5ac8fa]; for(let i0;i14;i){ const fw document.createElement(div); fw.className firework; const size Math.random()*22 8; fw.style.width size px; fw.style.height size px; fw.style.backgroundColor colors[Math.floor(Math.random()*colors.length)]; fw.style.left e.clientX px; fw.style.top e.clientY px; document.body.appendChild(fw); setTimeout(()fw.remove(),700); } }); // 生成飘落装饰 function createFall(){ const arr [✦,★,,,]; const el document.createElement(div); el.className fall-item; el.innerText arr[Math.floor(Math.random()*arr.length)]; el.style.left Math.random()*100%; el.style.animationDelay Math.random()*6s; el.style.fontSize Math.random()*1812px; document.body.appendChild(el); } for(let i0;i26;i) createFall(); /script /body /html2.展示代码效果创建文本文档展示文件扩展名修改文件名添加代码内容——通过记事本打开注一定要保存代码CtrlS访问效果