如何拆分[hh:mm:ss]格式时间并单独访问每位数字？

核心思路 #

先获取当前时间的时、分、秒，将其格式化为两位字符串（不足补0），再拆分每一位字符；通过定时器每秒更新一次，保证值的实时性。

代码实现（JavaScript） #

1. 时间拆分函数

function splitTimeIntoDigits() {
  const now = new Date();
  // 格式化为时、分、秒的两位字符串，不足补0
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  
  // 拆分每一位并返回
  return {
    H1: hours[0], // 小时第一位
    H2: hours[1], // 小时第二位
    M1: minutes[0], // 分钟第一位
    M2: minutes[1], // 分钟第二位
    S1: seconds[0], // 秒第一位
    S2: seconds[1] // 秒第二位
  };
}

2. 实时更新逻辑

用setInterval每秒执行一次拆分函数，获取最新的时间数字：

// 每秒更新一次实时时间数字
setInterval(() => {
  const realTimeDigits = splitTimeIntoDigits();
  // 这里可根据需求使用这些变量，比如渲染到页面
  console.log('实时时间拆分结果：', realTimeDigits);
  
  // 示例：更新页面元素内容
  // document.getElementById('h1-display').textContent = realTimeDigits.H1;
  // document.getElementById('h2-display').textContent = realTimeDigits.H2;
  // document.getElementById('m1-display').textContent = realTimeDigits.M1;
  // document.getElementById('m2-display').textContent = realTimeDigits.M2;
  // document.getElementById('s1-display').textContent = realTimeDigits.S1;
  // document.getElementById('s2-display').textContent = realTimeDigits.S2;
}, 1000);

补充说明 #

• 如果需要将字符串类型的数字转为数值类型，可使用parseInt(realTimeDigits.H1, 10)或Number(realTimeDigits.H1)。
• padStart(2, '0') 确保单数字的时/分/秒被补为两位，比如凌晨5点会被格式化为'05'，拆分后H1='0'、H2='5'，符合需求。

内容的提问来源于stack exchange，提问作者Enos jeba