异常教程

JavaScript getHours() 方法（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，处理日期和时间是一个高频需求。无论是显示当前时间、计算时间差，还是根据小时数执行特定逻辑，开发者都需要掌握相关方法。其中，getHours() 方法作为 Date 对象的核心工具之一，能够直接获取时间中的小时部分。本文将从基础概念到实战应用，深入浅出地讲解这一方法，并通过案例展示其在不同场景中的价值。

一、理解 Date 对象与时间方法

1.1 Date 对象：时间的“瑞士军刀”

JavaScript 的 Date 对象是处理日期和时间的基石。它允许开发者通过多种方式创建时间对象，并通过内置方法（如 getHours()、getMinutes() 等）提取具体的时间片段。
比喻：可以将 Date 对象想象成一个“时间工具箱”，而 getHours() 是其中一把专门用来“切取”小时数的精密工具。

创建 Date 对象的常见方式

// 创建表示当前时间的 Date 对象  
const now = new Date();  

// 通过字符串初始化特定时间  
const birthday = new Date("1990-05-15T08:30:00");  

// 通过参数初始化（年、月、日、小时、分钟、秒、毫秒）  
const eventTime = new Date(2023, 10, 1, 15, 20); // 注意：月份从 0 开始（0 = 1月）

1.2 时间方法的“分工”

Date 对象提供了多个方法来获取时间的不同部分，例如：

  • getFullYear()：获取年份（如 2023）。
  • getMonth()：获取月份（0-11，需加 1 转为实际月份）。
  • getDate()：获取日期（1-31）。
  • getHours()：获取小时数（0-23）。
  • getMinutes()：获取分钟（0-59）。

这些方法共同构成了时间解析的“工具链”，而 getHours() 是其中用于提取小时值的核心方法。

二、getHours() 方法详解

2.1 方法语法与返回值

dateObj.getHours();
  • 参数：无。
  • 返回值：一个 0 到 23 的整数，表示当前 Date 对象中的小时数（24 小时制）。

示例：获取当前小时数

const now = new Date();  
const currentHour = now.getHours();  
console.log(currentHour); // 输出如：14（表示下午 2 点）

2.2 注意事项

2.2.1 24 小时制的逻辑

getHours() 返回的是基于 24 小时制 的值，例如：

  • 上午 9 点 → 9
  • 下午 3 点 → 15
  • 凌晨 0 点 → 0

2.2.2 处理边界值

当时间接近边界时（如 23:59:59），需注意返回值的范围：

// 示例：23:59:59 的小时数  
const time = new Date("2023-11-01T23:59:59");  
console.log(time.getHours()); // 输出 23

三、getHours() 的典型应用场景

3.1 根据小时数执行不同逻辑

在网页或应用中，开发者常需要根据当前时间触发特定功能。例如：

  • 夜间模式：在 18 点后自动切换主题为深色。
  • 限时活动：仅在工作日 9:00-17:00 允许用户提交表单。

案例：实现“早中晚”问候语

function showGreeting() {  
  const hours = new Date().getHours();  
  let greeting;  
  if (hours < 12) {  
    greeting = "上午好！";  
  } else if (hours < 18) {  
    greeting = "下午好！";  
  } else {  
    greeting = "晚上好！";  
  }  
  document.getElementById("greeting").innerText = greeting;  
}

3.2 结合其他时间方法构建完整时间

getHours() 常与其他方法联用，例如：

const now = new Date();  
const timeString =  
  now.getHours() + ":" +  
  now.getMinutes() + ":" +  
  now.getSeconds();  
console.log(timeString); // 输出如：14:25:30

3.3 处理时区差异

由于 Date 对象默认基于浏览器的本地时区，开发者需注意跨时区场景。例如：

// 获取 UTC 时间的小时数  
const utcHour = new Date().getUTCHours();

四、进阶技巧与常见问题

4.1 补零操作：让时间显示更规范

在时间格式化场景中，小时、分钟等可能不足两位（如 5 需显示为 05）。可通过以下函数实现：

function padZero(num) {  
  return num < 10 ? "0" + num : num.toString();  
}  

const hours = padZero(new Date().getHours()); // 例如：7 → "07"

4.2 处理“跨日”逻辑

当需要计算时间差或判断是否跨越午夜时，getHours() 可作为关键依据：

// 示例：判断是否进入新一天  
function isNewDay(prevDate, current) {  
  return prevDate.getDate() !== current.getDate() ||  
    prevDate.getMonth() !== current.getMonth() ||  
    prevDate.getFullYear() !== current.getFullYear();  
}

4.3 避免常见陷阱

陷阱 1：月份与小时的混淆

开发者可能误将 getHours() 当作 getMonth() 使用，需注意两者的返回范围：

  • getHours()：0-23
  • getMonth()：0-11

陷阱 2：忽略时区影响

若服务器与客户端时区不同，直接使用 getHours() 可能导致错误。此时建议统一使用 UTC 时间：

const utcHours = new Date().getUTCHours(); // 获取世界标准时间的小时数

五、实战案例：构建一个简易的“倒计时器”

5.1 需求分析

用户希望在页面上显示距离“24:00”的剩余时间，包括小时、分钟和秒数。

5.2 实现步骤

  1. 计算目标时间：设定目标为当日的 24:00（即次日的 00:00）。
  2. 获取当前时间：通过 Date 对象实时更新。
  3. 计算时间差：将毫秒差转换为小时、分钟、秒。
  4. 更新 UI：通过 setInterval 每秒刷新显示。

完整代码

function startCountdown() {  
  const countdownElement = document.getElementById("countdown");  
  const interval = setInterval(() => {  
    const now = new Date();  
    const targetDate = new Date();  
    targetDate.setHours(24, 0, 0, 0); // 设置为当天 24:00  

    // 计算剩余时间（毫秒）  
    let remaining = targetDate - now;  

    if (remaining <= 0) {  
      clearInterval(interval);  
      countdownElement.textContent = "倒计时结束！";  
      return;  
    }  

    // 转换为小时、分钟、秒  
    const hours = Math.floor(remaining / (1000 * 60 * 60));  
    remaining %= (1000 * 60 * 60);  
    const minutes = Math.floor(remaining / (1000 * 60));  
    remaining %= (1000 * 60);  
    const seconds = Math.floor(remaining / 1000);  

    // 显示格式化后的时间  
    countdownElement.textContent =  
      `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;  
  }, 1000);  
}  

// 补零函数（与前文一致）  
function padZero(num) {  
  return num < 10 ? "0" + num : num.toString();  
}

六、总结与展望

通过本文，我们系统学习了 JavaScript getHours() 方法的用法、注意事项及实战案例。从基础的日期对象创建，到结合其他方法构建完整时间逻辑，再到处理时区和格式化问题，开发者能够逐步掌握这一工具的核心价值。

未来，随着 JavaScript 在前端、后端（如 Node.js）和物联网等领域的扩展，时间处理能力将成为开发者的重要技能。建议读者通过以下方式深化学习：

  1. 探索 Intl.DateTimeFormat API 实现国际化时间显示。
  2. 结合 moment.js 或 date-fns 等库优化复杂场景。
  3. 实践开发“日程提醒”“活动计时器”等项目，巩固知识。

掌握 getHours() 不仅是技术能力的提升，更是理解时间逻辑、解决实际问题的关键一步。希望本文能成为你 JavaScript 时间处理之旅的坚实起点！

最新发布

查看更多文章