JavaScript 中的 HH:MM:SS 秒表示


以 HH:MM:SS 格式表示秒在各个领域都具有重要意义,因为它能够在 JavaScript 应用程序中实现精确的时间跟踪和测量。掌握将原始秒转换为易于理解的 HH:MM:SS 格式的技巧,对于希望以最高精度和清晰度呈现基于时间的数据的开发者来说是一项宝贵的技能。在本文中,我们将深入探讨使用 JavaScript 以 HH:MM:SS 格式表示秒的细节,探索支持开发者优雅地以人类可读的方式显示时间间隔的底层算法和方法。

问题陈述

给定一个表示持续时间的秒数,任务是编写一个 JavaScript 函数,将给定的持续时间转换为 HH:MM:SS 格式,其中 HH 代表小时,MM 代表分钟,SS 代表秒。

示例输入 -

const durationInSeconds = 3665;

示例输出 -

01:01:05

在这种情况下,输入 durationInSeconds 为 3665,表示持续时间为 3665 秒。预期输出是字符串 "01:01:05",它表示 HH:MM:SS 格式的 1 小时 1 分钟 5 秒。

方法

在本文中,我们将看到几种在 JavaScript 中解决上述问题陈述的不同方法 -

  • 使用除法和模运算

  • 使用 Date 对象

  • 使用字符串操作和零填充

方法 1:使用除法和模运算

要将总秒数转换为小时、分钟和秒的格式化表示,请将总秒数除以 3600 以获得小时 (H)。然后,将上一步的余数除以 60 以获得分钟 (M)。最后,取上一步的余数以获得秒 (S)。如果需要,使用前导零对 H、M 和 S 的值进行格式化,使其具有两位数字。最后,用冒号 (":") 将 H、M 和 S 连接起来,以创建所需的表示。

示例

函数 formatTime(seconds) 获取总秒数并执行计算以获得小时、分钟和剩余秒的格式化表示。它将秒数除以 3600 以获得小时,计算余数并将其除以 60 以获得分钟,并使用模运算符获得剩余秒数。小时、分钟和剩余秒数的值使用 String.padStart() 方法格式化为两位数字。最后,使用字符串插值将格式化后的值与冒号连接起来,以创建所需的表示。

function formatTime(seconds) {
   const hours = Math.floor(seconds / 3600);
   const minutes = Math.floor((seconds % 3600) / 60);
   const remainingSeconds = seconds % 60;

   const formattedHours = String(hours).padStart(2, '0');
   const formattedMinutes = String(minutes).padStart(2, '0');
   const formattedSeconds = String(remainingSeconds).padStart(2, '0');

   return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

const seconds = 13550;
console.log(formatTime(seconds));

输出

以下是控制台输出 -

03:45:50

方法 2:使用 Date 对象

要使用 Date 对象,首先创建一个新实例,并使用总秒数乘以 1000 来设置时间。通过使用 getHours()、getMinutes() 和 getSeconds() 方法从 Date 对象中提取小时、分钟和秒。确保通过添加前导零(如果需要)对小时、分钟和秒的值进行两位数字格式化。最后,将格式化后的值与冒号连接起来,以获得所需的表示。

示例

函数 formatTime(seconds) 以总秒数作为输入并创建一个新的 Date 对象。小时、分钟和秒数使用 getHours()、getMinutes() 和 getSeconds() 提取。String.padStart() 对值进行前导零格式化(如果需要)。然后使用字符串插值将格式化后的值连接起来,形成带有冒号的所需表示。

function formatTime(sec) {
   const date = new Date(sec * 1000);
   const hours = String(date.getHours()).padStart(2, '0');
   const minutes = String(date.getMinutes()).padStart(2, '0');
   const seconds = String(date.getSeconds()).padStart(2, '0');

   return `${hours}:${minutes}:${seconds}`;
}

const seconds = 13550;
console.log(formatTime(seconds));

输出

以下是控制台输出 -

03:45:50

方法 3:使用字符串操作和零填充

要将总秒数转换为 UTC 格式的时间,首先创建一个 Date 对象并使用 toUTCString() 方法。然后,操作生成的字符串以提取小时、分钟和秒。如果需要,通过添加前导零来确保两位数字格式。最后,将格式化后的值与冒号连接起来,以获得所需的表示。

示例

函数 formatTime(seconds) 以总秒数作为输入,并创建一个以毫秒为单位的新 Date 对象。然后,它使用 toUTCString() 方法获取时间的 UTC 字符串表示。此字符串被拆分为一个数组,并且时间部分从索引 4 提取。时间字符串进一步拆分为小时、分钟和秒,并且值使用 String.padStart() 进行格式化。最后,将格式化后的值与冒号连接起来,形成所需的表示。

function formatTime(sec) {
   const date = new Date(sec * 1000).toUTCString();
   const time = date.split(' ')[4];
   const [hours, minutes, seconds] = time.split(':');

   const formattedHours = String(hours).padStart(2, '0');
   const formattedMinutes = String(minutes).padStart(2, '0');
   const formattedSeconds = String(seconds).padStart(2, '0');

   return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

const seconds = 13550;
console.log(formatTime(seconds));

输出

以下是控制台输出 -

03:45:50

结论

总而言之,将秒转换为 JavaScript 中的 HH:MM:SS 格式可能是一项艰巨的任务,需要细致的方法和对基本原理的全面理解。但是,通过仔细的实施和对细节的关注,可以巧妙地执行此过程。虽然对于某些人来说,生成的代码可能比较晦涩,但它可以为 Web 应用程序中的时间相关功能增添一丝复杂性和精确性。通过利用 JavaScript 的强大功能并采用这些深奥的技术,开发人员可以超越传统时间表示的限制,并将用户体验提升到新的高度。

更新于:2023年8月4日

2K+ 次查看

开启您的 职业生涯

完成课程获得认证

开始学习
广告