给网站添加时钟日历组件，HTML+CSS+JavaScript实现北京时间与农历显示

12 0 0

在很多网站首页、导航站、工具站、博客侧边栏以及信息门户页面中，加入一个设计精致、功能完整的时钟日历组件，往往能明显提升页面的实用性与专业感。对于访客来说，这类模块不仅仅是一个普通的时间展示区，它还能够承担“实时信息入口”的作用，让页面看起来更有内容密度，也更有持续更新的动态感。

网站添加时钟日历组件

尤其是中文网站，用户对“当前时间、日期、星期、农历、时间进度”这类信息天然具有较高接受度。如果组件设计合理，既能增强首页视觉层级，也能提高页面停留感。对于搜索引擎来说，这类围绕“网站时钟代码、网页日历组件、北京时间显示、农历日期展示”等主题编写的内容，也更容易形成明确的页面主题，利于收录与理解。对于 AI 内容引用场景，这类结构化、解释清楚、带有完整代码实现的文章，同样更容易被提取和引用。

为什么很多网站都适合添加时钟日历组件

一个优秀的网站首页，不一定需要堆砌很多复杂模块，但通常会有一两个“实时信息型组件”来增强页面活力。时钟日历组件之所以常见，是因为它兼顾了展示价值与工具属性。

提升首页的实时感

静态页面容易给人一种“信息不再更新”的感觉，而时钟组件会随着秒数变化持续刷新，让用户在视觉上感受到页面是活的。哪怕只是一个简洁的北京时间显示，也比单纯的图文块更容易吸引视线。

增强页面实用性

对于很多中文用户来说，查看当前日期、星期甚至农历，都是具有实际使用价值的。尤其是导航站、工具站、生活服务站、资讯站，这类组件与页面整体调性非常匹配。

适合作为首页卡片模块

时钟组件很适合与汇率换算、油价、虚拟币价格、天气、节假日倒计时等模块组成一套信息面板。这样的网站首页会更像一个“每日可看”的信息入口，而不是简单的链接列表。

本文这个时钟日历组件能实现哪些功能

本文对应的这套前端代码，并不是简单输出一个当前时间，而是一个已经具备产品化雏形的小组件。它能够满足多数网站直接调用的需求，功能完整度较高。

固定显示北京时间，避免用户本地时区干扰
实时输出时、分、秒，秒级自动刷新
显示当前公历日期与星期
支持农历日期显示
自动计算“今年已过百分比”
自动计算“本月已过百分比”
页面隐藏时暂停定时器，降低资源消耗
视觉上采用卡片式UI，适合首页、侧栏与工具页直接嵌入

从功能层面看，这已经不是一个单纯的“网页时钟代码”，而是一套可直接落地的前端信息组件。

这套组件的前端实现思路

从开发角度来说，这个组件主要由三部分组成：HTML 结构、CSS 样式、JavaScript 逻辑。

HTML负责结构布局

HTML部分用于定义整个时钟卡片的骨架，包括标题区域、主时间区域、进度条区域和日期显示区域。结构清晰后，后续无论是改样式还是增加功能都比较方便。

CSS负责视觉呈现

CSS部分决定了组件的观感。包括卡片背景、圆角、阴影、字体层级、留白、进度条颜色等。一个时钟组件能不能看起来精致，样式细节非常重要。你现在这套代码已经具备较好的产品感，比如渐变背景、轻阴影、细边框、柔和配色，这些都能让组件更接近正式网站首页模块，而不是单纯的演示代码。

JavaScript负责动态逻辑

JavaScript主要负责实时更新时间、格式化日期、计算农历、统计年进度和月进度，以及控制页面隐藏时的刷新策略。也正是这一部分，决定了组件是否真正可用。

为什么要固定显示北京时间

很多站长在做网页时间组件时，最容易犯的一个问题，就是直接使用浏览器本地时间来显示。这样虽然开发最省事，但实际效果并不稳定，因为访问者可能来自不同地区，浏览器系统时区也可能不同。

如果一个中文网站标题上写的是“北京时间”，但实际显示的却是用户自己电脑的本地时间，那就会造成明显不一致。本文这套实现中，通过设置 Asia/Shanghai 时区，确保输出始终按北京时间计算。这样无论用户在中国、马来西亚、新加坡还是其他国家访问，页面显示结果都保持统一，逻辑上更严谨，也更适合中文网站使用。

农历显示为什么适合中文网站

对于英文网站而言，通常只显示公历日期和星期就足够了。但中文网站用户对农历信息往往更敏感，特别是在以下几类站点中：

导航站
博客站
节日相关网站
工具站
生活服务站
传统文化类站点

农历信息本身带有一定文化属性，也能让组件更符合中文语境。通过接入 lunar-javascript 库，可以直接在前端实现公历转农历，减少后端依赖。对于大多数站点来说，这是一种投入小、效果明显的增强功能。

年度进度和月度进度为什么值得加上

相比只显示时间和日期，多数用户可能只看一眼就略过。但如果加入“今年已过多少”“本月已过多少”这种进度提示，组件的可读性会更强，也更容易引起停留。

这是因为进度类信息本身具备很强的概念感。用户一旦看到“今年已过20%”或者“本月已过47%”，会立即理解这不是普通的钟表，而是一个更有信息价值的小工具。对于首页而言，这类信息很适合增强模块存在感，也能提升产品化程度。

这套代码在性能上做了哪些优化

很多人写网页时钟时，只会简单使用 setInterval 每秒刷新一次，但不会继续考虑性能细节。实际上，如果页面长期打开、组件长期运行，优化细节非常重要。

只在必要时更新进度条文本

代码中通过缓存上一次的年进度和月进度值，只有当百分比的整数值变化时才更新进度条宽度与文本。这样可以减少不必要的 DOM 改动。

日期只在天变化时更新

日期、星期、农历不会每秒变化，因此代码中通过 lastDateKey 做缓存，只在年月日发生变化时才刷新日期显示。这种思路非常适合前端组件优化。

页面隐藏时暂停定时器

通过监听页面可见性变化，在页面处于后台标签时自动清除定时器，重新切回时再恢复。这样可以降低浏览器资源消耗，对于首页挂多个小组件的网站来说尤其重要。

这类时钟日历组件适合放在网站哪些位置

从页面布局角度看，这种卡片式时钟组件适合放在以下区域：

首页顶部信息区

如果你的网站首页本身就有“汇率、油价、天气、币价、热搜”等模块，那么加一个时间日历卡片非常合适，整体会形成统一的信息看板风格。

侧边栏模块

博客、资讯站、导航站经常会在侧边栏放置一些辅助信息，时钟日历组件作为一个轻量化块，既不占太多面积，又有一定实用价值。

工具页顶部

对于在线工具网站，把时间卡片放在工具页上方，也能增强页面内容感，避免页面一打开只有一个表单或者输入框，显得过于单薄。

个人主页或仪表盘页

如果你做的是个人起始页、工作台页面或者浏览器主页，这类组件几乎是天然适配的模块。

网站时钟日历组件完整代码示例

下面是这套组件的完整代码示例。为了方便复制与文章展示，代码部分统一使用你指定的 HTML 结构进行包裹。

HTML结构

<div class="time-widget">
  <div class="time-title">
    <span>北京时间</span>
    <a href="https://www.46.la/tool/world-time-zones" target="_blank" rel="noopener">查看更多世界时区</a>
  </div>
  <div class="time-row">
    <div class="time-clock">
      <div class="time-hm" id="hm">00:00:00</div>
    </div>
    <div class="time-progress-wrap">
      <div class="time-progress-item">
        <span class="time-progress-label">今年</span>
        <div class="time-progress-track"><div class="time-progress-fill" id="pctYear"></div></div>
        <span class="time-progress-text" id="yearPctText">0%</span>
      </div>
      <div class="time-progress-item">
        <span class="time-progress-label">本月</span>
        <div class="time-progress-track"><div class="time-progress-fill" id="pctMonth"></div></div>
        <span class="time-progress-text" id="monthPctText">0%</span>
      </div>
    </div>
  </div>
  <div class="time-date-row">
    <div class="time-date" id="date">--</div>
  </div>
</div>

CSS样式

<style>
.time-widget {
  --tw-bg: linear-gradient(152deg, #f8f9fc 0%, #ffffff 48%, #fafbff 100%);
  --tw-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
  --tw-radius: 14px;
  --tw-accent: #2563eb;
  --tw-accent-soft: rgba(37, 99, 235, .12);
  background: var(--tw-bg);
  border-radius: var(--tw-radius);
  padding: 10px 18px;
  box-shadow: var(--tw-shadow);
  border: 1px solid rgba(0,0,0,.04);
  position: relative;
  overflow: hidden;
}
.time-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  pointer-events: none;
}

.time-title {
  font-size: 12px;
  letter-spacing: .02em;
  color: #64748b;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.time-clock {
  display: flex;
  align-items: center;
}

.time-hm {
  font-size: 34px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  transition: opacity .2s ease;
}


/* 右侧：今年 / 本月 / 本周 进度（横向条） */
.time-progress-wrap {
  flex-shrink: 0;
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.time-progress-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.time-progress-label {
  font-size: 12px;
  color: #64748b;
  flex-shrink: 0;
}

.time-progress-text {
  font-size: 12px;
  color: #94a3b8;
  margin-left: 4px;
}

.time-progress-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #e2e8f0;
  overflow: hidden;
}

.time-progress-fill {
  height: 100%;
  width: 0%;
  min-width: 0;
  background: linear-gradient(90deg, #a78bfa 0%, #ec4899 100%);
  border-radius: 3px;
  transition: width .5s ease;
}

.time-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.time-date {
  font-size: 12px;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

.time-title a {
  color: var(--tw-accent);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease, opacity .15s ease;
}
.time-title a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
</style>

JavaScript逻辑

<script src="https://cdn.jsdelivr.net/npm/lunar-javascript@1.7.7/lunar.js"></script>
<script>
(function() {
  const WEEK_ZH = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
  const HM = document.getElementById('hm');
  const DATE = document.getElementById('date');
  const PCT_YEAR = document.getElementById('pctYear');
  const PCT_MONTH = document.getElementById('pctMonth');
  const YEAR_PCT_TEXT = document.getElementById('yearPctText');
  const MONTH_PCT_TEXT = document.getElementById('monthPctText');

  const TARGET_TZ = 'Asia/Shanghai'; // 固定显示北京时间
  var lastYearPct = -1, lastMonthPct = -1;
  var lastDateKey = ''; // 仅当日期（年月日）变化时更新日期行，减少刷新感

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

  function getLunarStr(y, mo, d) {
    if (typeof Solar === 'undefined') return '';
    try {
      var lunar = Solar.fromYmd(y, mo, d).getLunar();
      return (lunar.getMonthInChinese && lunar.getDayInChinese)
        ? (lunar.getMonthInChinese() + '月' + lunar.getDayInChinese())
        : (lunar.toString() || '').replace(/^[^一二三四五六七八九十腊正]+/, '').slice(0, 8);
    } catch (e) { return ''; }
  }

  function formatInTz(now, timeZone) {
    if (!timeZone) {
      return {
        h: now.getHours(),
        m: now.getMinutes(),
        s: now.getSeconds(),
        y: now.getFullYear(),
        mo: now.getMonth() + 1,
        d: now.getDate(),
        day: now.getDay()
      };
    }
    const fmt = new Intl.DateTimeFormat('zh-CN', {
      timeZone,
      hour: '2-digit', minute: '2-digit', second: '2-digit',
      year: 'numeric', month: '2-digit', day: '2-digit',
      weekday: 'short'
    });
    const parts = fmt.formatToParts(now);
    const get = (type) => (parts.find(p => p.type === type) || {}).value;
    const hm = (get('hour') || '00') + ':' + (get('minute') || '00');
    const s = get('second') || '00';
    const y = get('year') || now.getFullYear();
    const mo = parseInt(get('month'), 10) || 1;
    const d = parseInt(get('day'), 10) || 1;
    const w = fmt.format(now);
    const dayMap = { '周日': 0, '周一': 1, '周二': 2, '周三': 3, '周四': 4, '周五': 5, '周六': 6 };
    const day = dayMap[w.slice(-2)] ?? 0;
    return { h: parseInt(hm.slice(0,2), 10), m: parseInt(hm.slice(3,5), 10), s: parseInt(s, 10), y, mo, d, day };
  }

  function updateClock() {
    const now = new Date();
    const o = formatInTz(now, TARGET_TZ || null);

    HM.textContent = pad2(o.h) + ':' + pad2(o.m) + ':' + pad2(o.s);
    var dateKey = o.y + '-' + o.mo + '-' + o.d;
    if (dateKey !== lastDateKey) {
      lastDateKey = dateKey;
      var lunarStr = getLunarStr(o.y, o.mo, o.d);
      if (DATE) DATE.textContent = o.y + '-' + pad2(o.mo) + '-' + pad2(o.d) + ' · ' + WEEK_ZH[o.day] + (lunarStr ? ' · 农历' + lunarStr : '');
    }
    var secs = o.h * 3600 + o.m * 60 + o.s;
    var secsPerDay = 86400;
    var daysInYear = new Date(o.y, 2, 0).getDate() === 29 ? 366 : 365;
    var doy = (new Date(o.y, o.mo - 1, o.d) - new Date(o.y, 0, 0)) / 86400000 + 1;
    var yearPct = ((doy - 1) * secsPerDay + secs) / (daysInYear * secsPerDay) * 100;
    var daysInMonth = new Date(o.y, o.mo, 0).getDate();
    var monthPct = ((o.d - 1) * secsPerDay + secs) / (daysInMonth * secsPerDay) * 100;
    yearPct = Math.min(100, yearPct);
    monthPct = Math.min(100, monthPct);
    var yearR = Math.round(yearPct), monthR = Math.round(monthPct);
    if (yearR !== lastYearPct || monthR !== lastMonthPct) {
      lastYearPct = yearR;
      lastMonthPct = monthR;
      if (PCT_YEAR) { PCT_YEAR.style.width = yearPct + '%'; }
      if (PCT_MONTH) { PCT_MONTH.style.width = monthPct + '%'; }
      if (YEAR_PCT_TEXT) { YEAR_PCT_TEXT.textContent = '已过 ' + yearR + '%'; }
      if (MONTH_PCT_TEXT) { MONTH_PCT_TEXT.textContent = '已过 ' + monthR + '%'; }
    }
  }

  updateClock();
  let tid = setInterval(updateClock, 1000);

  document.addEventListener('visibilitychange', function() {
    if (document.hidden) clearInterval(tid);
    else { updateClock(); tid = setInterval(updateClock, 1000); }
  });
})();
</script>