html5中的step属性以秒为单位，如每15分钟选一次需设step="900"；默认值应秒数为0，且step仅优化体验，后端或js仍需校验。
在 HTML5 的 <input type="time"> 中，可以通过 step 属性控制时间选择的最小粒度。要实现以**分钟为单位**的时间跨度（例如：只允许选择整点或每15分钟、30分钟等），关键在于正确设置 step 的值——它表示**秒数**，不是分钟。
step 值的含义是秒数，不是分钟
step 属性对 time 输入框而言，单位是**秒**。浏览器会据此限制可选的时间点（如 09:00、09:15、09:30…）。常见误区是写 step="15" 以为代表“15分钟”，实际这是 15 秒，会导致时间按秒级跳变，失去实用性。
正确换算方式：
1 分钟 = 60 秒，所以：
- 每 1 分钟可选 →
step="60" - 每 5 分钟可选 →
step="300"（5 × 60） - 每 15 分钟可选 →
step="900"（15 × 60） - 每 30 分钟可选 →
step="1800"（30 × 60） - 每 1 小时可选 →
step="3600"（60 × 60）
实际使用示例
以下代码使用户只能选择整15分钟的时间点（如 08:00、08:15、08:30…）：
如果希望默认值也对齐步长（比如设为 09:00 而非 09:07），建议显式设置 value，且确保其秒数部分为 0（如 value="09:00" 或 value="14:30"），否则某些浏览器可能自动舍入或显示异常。
兼容性与注意事项
目前主流浏览器（Chrome、Edge、Firefox、Safari）均支持 step 对 time 输入框的控制，但表现略有差异：
- 桌面 Chrome/Edge：时间拾取器滑块/下拉选项严格按 step 对齐
- Firefox：支持 step，但原生控件较简略，依赖键盘输入时仍可手动输入任意时间（提交前可通过 JS 校验）
- Safari：支持 step，但部分旧版本可能忽略；建议测试 iOS/macOS 最新系统
- 移动端（Android/iOS）：软键盘时间选择器通常尊重 step，但原生体验由系统决定，无法完全强制
重要提醒：step 是**用户体验辅助属性，不是数据校验手段**。后端或 JavaScript 仍需验证时间是否符合业务要求（如是否为 15 分钟倍数）。
配合 JavaScript 进行校验（可选增强）
若需确保用户提交的时间严格符合步长，可用 JS 检查：
const timeInput = document.querySelector('input[type="time"]');timeInput.addEventListener('change', () => {
const [hours, minutes] = timeInput.value.split(':').map(Number);
const totalMinutes = hours * 60 + minutes;
if (totalMinutes % 15 !== 0) {
alert('请选择 15 分钟整数倍的时间（如 09:00、09:15）');
timeInput.value = ''; // 清空非法输入
}
});
其中 15 可替换为你设定的分钟步长（如 5、30）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
