纯html+css即可实现“coming soon”页，需添加viewport标签、用rem/vw适配字体、background-size: cover防裁切；倒计时用setinterval+原生date计算；邮件表单直接嵌入mailchimp等服务；上线前务必移除console.log和alert。
直接用纯HTML+CSS就能搞定，不需要JavaScript
绝大多数“Coming Soon”页面本质就是静态占位页，核心诉求是：快速上线、适配手机、不依赖后端。用 HTML + CSS 完全够用，加JS反而增加加载失败风险（比如CDN挂了、浏览器禁脚本）。
常见错误现象：页面在iPhone上文字挤成一团、倒计时数字错位、背景图只显示左上角一小块——这些问题90%出在没加响应式基础标签和CSS重置。
- 必须在
里加：<meta name="viewport" content="width=device-width, initial-scale=1"> - 避免用
px写字体大小，改用rem或vw（例如font-size: 4vw;） - 背景图用
background-size: cover;+background-position: center;防止裁切异常
倒计时用 setInterval 就行，别碰第三方库
只要求显示“距离上线还剩X天X小时”，原生 setInterval 足够稳定。引入 moment.js 或 dayjs 属于过度设计，白占10KB+资源，且可能因CSP策略被拦截。
使用场景：需要精确到秒的动态更新，且上线时间固定（比如2025-06-01 10:00:00）。
- 用
new Date("2025-06-01T10:00:00")初始化目标时间，注意ISO格式字符串比"2025/06/01"兼容性更好 - 每次计算用
Math.floor((target - now) / 1000)得到剩余秒数，再拆分成天/时/分/秒 - 别在
setInterval里反复调document.getElementById，先缓存DOM节点
const deadline = new Date("2025-06-01T10:00:00");
const daysEl = document.getElementById("days");
// ... 缓存其他元素
setInterval(() => {
const t = deadline - new Date();
const days = Math.floor(t / (1000 * 60 * 60 * 24));
daysEl.textContent = days;
}, 1000);
邮件订阅表单别自己写POST逻辑
用户填邮箱点提交，你根本不需要搭后端接收。直接用 Mailchimp、Buttondown 或 Substack 的嵌入表单，它们提供现成的 <form></form> HTML 片段，连CORS和CSRF都帮你处理好了。
容易踩的坑：自己写fetch发邮箱到自己的服务器 → 极易进垃圾邮件列表；用GET把邮箱拼在URL里请求 → 邮箱明文暴露在日志和浏览器历史中。
- Mailchimp 表单的
action是类似https://xxx.usxx.list-manage.com/subscribe/post?u=xxx&id=xxx的地址，保留原样 - 隐藏掉默认的
submit按钮，用自定义按钮触发form.submit()即可保持样式统一 - 务必检查表单里是否有
required属性，否则空提交会跳转到Mailchimp默认页
部署前必须关掉 console.log 和调试用的 alert
上线前最后一步常被忽略：开发时写的 console.log("倒计时已启动") 或临时 alert("测试成功")，会真实出现在用户浏览器里，尤其在Safari上弹窗直接阻塞页面。
性能影响：虽然单个 console.log 开销小，但高频倒计时里每秒打一次，会拖慢低端安卓机的渲染帧率。
- 用正则批量删：
/console\.log\([^)]*\);?/g或/alert\([^)]*\);?/g - 更稳妥的做法是在构建流程里用
terser自动移除（配置drop_console: true） - 上线后用浏览器开发者工具的
Console面板刷新页面，确认无任何输出
真正麻烦的是跨时区时间计算和邮件服务的退订链路——这两块一旦出问题，用户投诉会直接绕过页面找你本人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
