网站页脚添加精确到秒的运行时间 | 轻量优雅实现方案

2025-12-30

一个小小的运行时间计数器，不仅能体现网站的稳定性，还能传递出维护者的用心。但很多人在实现时，要么样式突兀，要么性能浪费。本文将教你用不到 30 行代码，在页脚轻量、美观、精准地展示“已运行 X 天 HH:MM:SS”。

为什么要在页脚加运行时间？

增强信任感：用户看到“已运行 1000+ 天”，会潜意识认为这是一个长期维护的站点。
极客情怀：对技术博客或个人作品集来说，这是一种低调的“勋章”。
零成本彩蛋：无需后端支持，纯前端实现，却能带来独特体验。
但要注意：不能喧宾夺主。页脚空间有限，信息必须简洁、紧凑、不换行。

设计原则

文字融合：与版权信息同行，字体大小略小，颜色稍淡。
格式紧凑：避免“X 天 X 小时 X 分 X 秒”这种冗长表达。
精确到秒：每秒刷新，体现“实时感”，但更新逻辑要高效。
响应式安全：在手机上也不换行、不溢出。

完整实现代码

将以下代码嵌入你的 <footer> 区域即可：

<div class="site-uptime">
  © 2025 我的博客 · 
  <span id="uptime">加载中...</span>
</div>

<style>
  .site-uptime {
    font-size: 0.8125rem;
    color: #6b7280;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
  }
</style>

<script>
  // ✅ 修改为你的实际上线时间（ISO 8601 格式）
  const launchTime = new Date('2023-01-01T00:00:00');

  function pad(n) {
    return String(n).padStart(2, '0');
  }

  function updateUptime() {
    const now = new Date();
    const diff = now - launchTime;

    if (diff <= 0) {
      document.getElementById('uptime').textContent = '即将上线';
      return;
    }

    const days = Math.floor(diff / (86400000)); // 1000*60*60*24
    const hours = Math.floor((diff % 86400000) / 3600000);
    const minutes = Math.floor((diff % 3600000) / 60000);
    const seconds = Math.floor((diff % 60000) / 1000);

    const timeStr = `${days}天 ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
    document.getElementById('uptime').textContent = `已运行 ${timeStr}`;
  }

  updateUptime();
  setInterval(updateUptime, 1000);
</script>