如何实现网站加载时显示countdown组件及启动前倒计时跳转主页面

一、让倒计时组件在网站加载时显示 #

既然你的倒计时组件功能已经正常，只需要调整页面的初始显示逻辑：

• 把倒计时组件放在页面的最外层容器中，设置它默认处于显示状态（比如通过CSS设置display: block）；同时把主网页的内容容器默认设置为隐藏状态（display: none）。这样页面加载完成后，用户第一眼看到的就是倒计时组件。
• 基础结构示例：

<!-- 倒计时组件：默认显示 -->
<div id="countdown-wrap">
  <!-- 你的倒计时组件代码 -->
</div>

<!-- 主网站内容：默认隐藏 -->
<div id="main-site" style="display: none;">
  <!-- 主网页的所有内容 -->
</div>

二、倒计时归0时切换到主网页 #

在你的倒计时组件逻辑中，加入倒计时结束的触发逻辑即可：

1. 基础切换（直接显示已隐藏的主内容）：
   当检测到倒计时数值== 0时，执行以下操作：

// 隐藏倒计时组件
document.getElementById('countdown-wrap').style.display = 'none';
// 显示主网页内容
document.getElementById('main-site').style.display = 'block';

2. 懒加载主内容（适合主网页体积较大的场景）：
   如果想减少初始加载的资源体积，可以在倒计时结束后再动态拉取并渲染主网页内容：

function handleCountdownEnd() {
  // 移除倒计时组件
  document.getElementById('countdown-wrap').remove();
  // 加载主页面HTML
  fetch('/main.html')
    .then(res => res.text())
    .then(html => {
      document.body.innerHTML = html;
      // 动态加载主页面的JS文件（如果有）
      const mainScript = document.createElement('script');
      mainScript.src = '/main.js';
      document.body.appendChild(mainScript);
    });
}

3. 额外优化：可以在倒计时过程中悄悄预加载主网页的核心资源（比如CSS、图片），避免倒计时结束后用户等待加载的空白期。

体验优化建议 #

• 给主内容添加淡入过渡，让切换更自然：

#main-site {
  opacity: 0;
  transition: opacity 0.6s ease;
}
#main-site.active {
  opacity: 1;
}

然后在JS中切换时替换为添加类名：

document.getElementById('main-site').style.display = 'block';
document.getElementById('main-site').classList.add('active');

• 处理页面刷新：用localStorage记录倒计时的剩余时间，避免用户刷新页面后倒计时从头开始。

内容的提问来源于stack exchange，提问作者Brave