JavaScript怎么判断当前时间并输出“早上”等中文时段

作者：半夏

时间：2026-11-14

详细讲解如何使用JavaScript获取系统当前小时数，合理划分凌晨、早上、上午、中午、下午和晚上等中文时段，并提供条件分支法与规则查表法的完整代码与实战技巧。

文章目录

在 JavaScript 中判断当前时间并输出“早上”、“下午”等中文时段，核心解决路径是通过 new Date().getHours() 提取本地系统的当前小时数（范围为 0 到 23 的整数），再结合预设的时间区间进行范围比对，最后映射出对应的中文文本。本文将逐步讲解时间获取方式、标准时段划分规则以及两种主流的实现方案。

JavaScript怎么判断当前时间并输出“早上”等中文时段 — 图 0：JavaScript 获取当前时间并输出中文问候时段全景概览

一、获取当前系统小时数：Date 与 getHours()

JavaScript 内置的 Date 对象提供了丰富的日期与时间操作方法。判断中文时段通常只需关注“小时”这一维度，因此核心 API 是 Date.prototype.getHours()。

// 实例化当前时间并取得本地小时数
const now = new Date();
const currentHour = now.getHours();

console.log('当前小时数（0~23）：', currentHour);

在实际使用中，需要明确以下两个关键特征：

返回值范围为 0 到 23 的整数：午夜 00:00 至 00:59 返回 0，深夜 23:00 至 23:59 返回 23。它不会返回 24。
基于客户端本地时区：getHours() 依据运行环境（用户的操作系统或浏览器）设置的时区进行解析。如果用户身处东八区，返回的就是北京时间对应的小时；若需要跨地域统一计算，则应考虑 getUTCHours() 或服务端统一时间戳。

二、合理划分中文时段与确定区间边界

日常生活中的时间段划分并没有绝对单一的强制规范，但在软件界面设计中，通常遵循人们普遍的生活与作息作息习惯。中文环境下最常见的时段标准包含六个阶段：凌晨、早上、上午、中午、下午与晚上。

时段名称	钟表时间范围	getHours() 整数区间	代码逻辑表达式
凌晨	00:00 - 05:59	[0, 6) 即 0, 1, 2, 3, 4, 5	`hour >= 0 && hour < 6`
早上	06:00 - 08:59	[6, 9) 即 6, 7, 8	`hour >= 6 && hour < 9`
上午	09:00 - 11:59	[9, 12) 即 9, 10, 11	`hour >= 9 && hour < 12`
中午	12:00 - 13:59	[12, 14) 即 12, 13	`hour >= 12 && hour < 14`
下午	14:00 - 17:59	[14, 18) 即 14, 15, 16, 17	`hour >= 14 && hour < 18`
晚上	18:00 - 23:59	[18, 24) 即 18 ~ 23	`hour >= 18 && hour < 24`

边界处理原则：左闭右开

在编写区间判断时，推荐严格采用“左闭右开”（包含起始、不包含结束）的设计。例如中午为 hour >= 12 && hour < 14。这样当系统时间恰好来到 12:00:00 时，hour 值为 12，能够明确落入“中午”区间，避免了 12 点整既属于上午又属于中午的边界歧义。

三、基础实现：使用多分支条件（if...else if）

掌握区间定义后，最直观的编程实现是编写一个纯函数，接收一个 Date 对象或默认使用当前时间，然后通过 if...else if 阶梯结构完成匹配。

1. 完整封装函数

利用条件分支自上而下执行的短路特性，若前一个 hour < 6 不成立，进入下一分支时必然已经满足 hour >= 6。因此后续条件只需判断右边界，无需重复书写 hour >= 6 && hour < 9，代码更加清晰紧凑。

/**
 * 根据指定时间或当前系统时间返回中文时段
 * @param {Date} [date=new Date()] 可选的日期对象，默认为当前时间
 * @returns {string} 中文时段名称（例如："早上"）
 */
function getTimePeriod(date = new Date()) {
  const hour = date.getHours();

  if (hour < 6) {
    return '凌晨';
  } else if (hour < 9) {
    return '早上';
  } else if (hour < 12) {
    return '上午';
  } else if (hour < 14) {
    return '中午';
  } else if (hour < 18) {
    return '下午';
  } else {
    return '晚上';
  }
}

// 运行测试
console.log('当前时段：', getTimePeriod());

2. 结合界面 DOM 输出问候语

在实际网页中，获取到中文时段文本后，可以拼接用户名或问候后缀，直接渲染到网页的指定元素中。

// 假设 HTML 中存在 <h2 id="greeting"></h2>
function renderGreeting(username = '访客') {
  const period = getTimePeriod();
  const greetingElement = document.getElementById('greeting');
  
  if (greetingElement) {
    greetingElement.textContent = `${username}，${period}好！`;
  }
}

// 页面加载完成后触发渲染
window.addEventListener('DOMContentLoaded', () => {
  renderGreeting('张三');
});

四、进阶方案：使用规则数组查表（数据驱动）

在大型前端项目或需要支持后台动态配置时段的系统中，硬编码多层 if...else 分支会增加后期的修改与测试成本。采用“数据驱动”的思想，将时段阈值和名称抽离为配置数组，通过 Array.prototype.find() 匹配，是更为优雅的做法。

// 定义时段映射规则表（从小到大排列）
const TIME_PERIOD_RULES = [
  { maxHour: 6, label: '凌晨' },
  { maxHour: 9, label: '早上' },
  { maxHour: 12, label: '上午' },
  { maxHour: 14, label: '中午' },
  { maxHour: 18, label: '下午' },
  { maxHour: 24, label: '晚上' }
];

/**
 * 查表法获取时段
 * @param {Date} [date=new Date()]
 * @returns {string}
 */
function getTimePeriodByTable(date = new Date()) {
  const hour = date.getHours();
  // 查找第一个满足 hour < maxHour 的规则项
  const match = TIME_PERIOD_RULES.find(rule => hour < rule.maxHour);
  return match ? match.label : '晚上';
}

// 示例调用
console.log(getTimePeriodByTable());

这种模式的优势在于数据与逻辑解耦：若产品需求调整，要求在 17:00 到 19:00 新增一个“傍晚”时段，只需在配置数组中插入 { maxHour: 19, label: '傍晚' }，无需修改核心检索逻辑。

五、工程实践中的注意事项与常见细节

在真实业务场景中，除了正确的逻辑判断外，还需要注意以下几个容易被忽略的技术细节：

单页应用（SPA）长驻不刷新的时效问题：
如果用户在上午 11:50 打开页面并常驻后台，到下午 14:00 时界面若不重新渲染，仍会显示“上午好”。针对此类场景，应配合 setInterval 定时器（例如每分钟检测一次）或利用 setTimeout 精确计算距离下一个时段临界点的剩余毫秒数，动态触发问候语的重绘更新。
客户端本地时间的准确性：
new Date() 取自用户本机的操作系统时钟。如果用户的电脑系统时间被手动调错，计算出的时段将与现实不符。对于严谨的企业内网应用或交易系统，推荐在页面初始化时从服务端响应头（Date 头）或 API 获取标准服务器时间戳，并在本地通过时钟差值换算真实时间。
多语言与国际化（i18n）支持：
如果项目需要面向多语言用户，不建议将“早上”、“中午”等中文直接混写在业务函数内。可让函数返回状态键名（如 'morning'、'afternoon'），再由多语言插件（如 i18next）翻译为目标语种文案。

总结

利用 JavaScript 判断当前时间并输出中文时段的核心在于：使用 new Date().getHours() 获取 0 到 23 的整型小时数，并依据“左闭右开”的边界原则进行分段。小型轻量脚本可直接采用 if...else if 短路判断；中大型或配置敏感型系统则推荐采用规则数组查表法，以保持代码的高内聚、低耦合与易维护性。