Chrome/IE中input[type=time]仅选时分时无法转秒的问题排查

• 浏览器语法兼容性问题：IE浏览器完全不支持ES6的数组解构赋值语法，低版本Chrome也存在兼容缺陷，你代码中[hours, minutes, seconds] = czas.split(':');这行在上述浏览器中会直接抛出语法错误，导致后续逻辑完全中断，所以就算后续补充输入秒数，转换逻辑也不会正常执行。
• 时间格式处理不严谨：type="time"的输入框在未设置秒数时，Chrome、IE返回的时间格式为HH:mm，使用split(':')拆分后只会得到长度为2的数组，此时解构赋值得到的seconds是undefined，参与运算时undefined * 1结果为NaN，最终整个time_sec计算结果为NaN，会触发你的兜底逻辑被赋值为720。
• 缺少类型校验和默认值兜底：拆分得到的时分秒默认是字符串类型，且没有对缺失的分段设置默认值，很容易出现运算异常。

替换原有逻辑，放弃解构语法做兼容，同时给缺失的时间分段补默认值0即可，修复后代码如下：

$(document).ready(function() {
  $('#short_time').on('input', function() {
    var czas = document.getElementById("short_time").value; 
    var timeParts = czas.split(':');
    // 手动取值+类型转换+默认值兜底，兼容所有浏览器
    var hours = Number(timeParts[0]) || 0;
    var minutes = Number(timeParts[1]) || 0;
    var seconds = Number(timeParts[2]) || 0;

    var time_sec = hours * 3600 + minutes * 60 + seconds;

    if(isNaN(time_sec)){
      time_sec = 720;
    }

    $("input[name='time_sec']").val(time_sec);
  });
});

• 移除ES6解构语法，改用数组下标手动取值，兼容IE和低版本Chrome浏览器
• 所有时间分段统一转数字类型，同时加|| 0做兜底，就算没有对应分段（比如未设置秒数）也会默认取0参与计算，不会出现NaN问题
• 兜底值改为数字类型，避免后续业务逻辑如果需要做数字运算时出现类型错误

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