如何将HTML time标签秒值获取到JavaScript变量及s1取值失败解决

我来帮你搞定这个问题！你现在的代码里直接用固定索引time[6]来取秒值的做法太脆弱了，很容易因为时间格式的小变化就失效，而且还有一些细节没处理到位。

问题根源 #

1. 固定索引不可靠：虽然<input type="time">带step="1"时返回的value通常是HH:mm:ss格式，但如果用户没设置秒（或者某些浏览器的特殊处理），返回的可能是HH:mm，这时候time[6]根本不存在，自然取不到值；就算有秒，要是小时/分钟是个位数（虽然标准格式是两位，但不排除特殊情况），你的索引也会完全错位。
2. 变量未声明：你的代码里time、h1这些变量都没加var/let/const，会变成全局变量，容易引发意外的bug。

修复方案（推荐） #

用字符串拆分的方法来获取时分秒，不管格式是两位还是一位，都能准确拿到对应的值：

function fun() {
  // 获取时间输入框元素
  const timeInput = document.getElementById("time");
  // 获取输入框的时间值
  const timeValue = timeInput.value;
  
  // 如果没有选择时间，直接返回避免报错
  if (!timeValue) return;
  
  // 把时间按冒号分割成数组，分别对应小时、分钟、秒
  const [hours, minutes, seconds] = timeValue.split(':');
  
  // 确保时分秒都是两位格式（比如把"9"变成"09"），再拆分单个数字位
  const paddedHours = hours.padStart(2, '0');
  const paddedMinutes = minutes.padStart(2, '0');
  const paddedSeconds = seconds ? seconds.padStart(2, '0') : '00'; // 没有秒的话默认补00
  
  const h1 = paddedHours[0];
  const h2 = paddedHours[1];
  const m1 = paddedMinutes[0];
  const m2 = paddedMinutes[1];
  const s1 = paddedSeconds[0];
  const s2 = paddedSeconds[1];

  // 拼接成目标格式显示
  document.getElementById("print").value = `${h1}${h2}:${m1}${m2}:${s1}${s2}`;
}
setInterval(fun, 1000);

对应的HTML可以稍微优化下（<input>是自闭合标签，不需要</input>）：

<p>Time:</p>
<input type="time" id="time" name="time" step="1"><br>
<input type="text" id="print">

额外说明 #

如果你想更严谨地处理时间，也可以用Date对象来解析：

function fun() {
  const timeInput = document.getElementById("time");
  const timeValue = timeInput.value;
  if (!timeValue) return;
  
  // 用当前日期拼接选中的时间，生成完整的Date对象
  const now = new Date();
  const fullTime = new Date(`${now.toLocaleDateString()} ${timeValue}`);
  
  // 把时分秒转成两位字符串
  const hours = fullTime.getHours().toString().padStart(2, '0');
  const minutes = fullTime.getMinutes().toString().padStart(2, '0');
  const seconds = fullTime.getSeconds().toString().padStart(2, '0');
  
  const h1 = hours[0];
  const h2 = hours[1];
  const m1 = minutes[0];
  const m2 = minutes[1];
  const s1 = seconds[0];
  const s2 = seconds[1];

  document.getElementById("print").value = `${h1}${h2}:${m1}${m2}:${s1}${s2}`;
}
setInterval(fun, 1000);

这种方法能更精准地处理时间逻辑，适合后续还要做时间计算的场景。

内容的提问来源于stack exchange，提问作者Sai Revanth