HTML <input type="time"> 默认值为空，需用JavaScript动态设置为当前时间，格式为“HH:MM”，并检查是否已存在用户输入以避免覆盖。
HTML <input type="time"> 不会自动设为当前时间
浏览器原生的 <input type="time"> 渲染为时间选择器，但它默认值为空（""），不会自动填充当前时间。想让它一打开就显示“现在”，必须手动设置 value 属性，且格式必须严格为 "HH:MM" 或 "HH:MM:SS"（24 小时制，两位数补零）。
常见错误是直接写 value="new Date().toTimeString()" —— 这在 HTML 中无效，因为模板里不执行 JS；也有人用 value="14:30" 硬编码，显然不满足“当前时间”需求。
- 必须用 JavaScript 动态设置
value - 推荐用
toLocaleTimeString("sv-SE", { hour12: false })获取标准格式（如"14:27:05"），再截取前 5 位得"14:27" - 注意：部分旧版 Safari 对
type="time"支持弱，且不显示秒，建议只用HH:MM
用 JS 初始化 <input type="time"> 为当前时间
最简做法是在 DOM 加载后，获取当前小时和分钟，拼成 "HH:MM" 字符串并赋给 value：
const timeInput = document.querySelector('input[type="time"]');
if (timeInput && !timeInput.value) {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
timeInput.value = `${hours}:${minutes}`;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
- 检查
!timeInput.value避免覆盖用户已输入的值 - 用
padStart(2, '0')确保个位数补零（如9:5是非法值，浏览器会清空输入框） - 不要用
now.toTimeString().slice(0,5)—— 时区或本地化可能导致格式不稳定（例如中文系统返回"下午 2:30"）
用户修改后如何读取选中的时间值
<input type="time"> 的 value 始终是字符串，格式固定为 "HH:MM"（或带秒）。直接读取即可，无需解析日期对象：
timeInput.addEventListener('change', () => {
console.log(timeInput.value); // 如 "09:15" 或 ""（清空时）
});
注意事项：
- 值为空字符串
""表示用户清空了输入，不是 “00:00” - 该值不含日期、时区信息，仅表示一天内的时间点
- 若需转为
Date对象做计算，需手动拼接日期（如new Date(`1970-01-01T${timeInput.value}`)）
为什么不能靠 valueAsNumber 或 valueAsDate
<input type="time"> 的 valueAsNumber 返回的是从当天 00:00 开始的毫秒数（如 09:30 → 34200000），但该属性在 Firefox 中不支持；valueAsDate 则始终返回 null（规范明确不支持，因缺少日期上下文）。
所以实际开发中应完全忽略这两个属性，只依赖 value 字符串，并按需自行转换。
真正容易被忽略的是：时间输入框的值在表单提交时只发字符串，后端收不到任何时区或日期信息——如果你以为它能代表“此刻”，那就错了。它只是“用户挑的一个钟表读数”。
