step属性对time类型input无效，浏览器会忽略它；实现半小时粒度需用JavaScript监听事件并四舍五入时间，或改用range输入框、select下拉菜单等可控方案。
step 属性对 time 类型 input 无效
HTML 的 step 属性在 <input type="time"> 上**不控制时间粒度**，浏览器会忽略它（Chrome、Firefox、Safari 均如此）。你设 step="1800"（即 30 分钟 = 1800 秒），实际下拉选项或滚动器仍按 1 分钟步进，甚至可能完全不生效。
真正起作用的是 value 的格式与 JavaScript 控制
浏览器原生 time 输入框只接受 HH:MM 或 HH:MM:SS 格式，且内部以秒为单位处理。要实现半小时一档，必须靠 JS 约束输入和更新逻辑：
- 监听
input或change事件，截取用户输入后四舍五入到最近的 30 分钟 - 用
setMinutes()和getMinutes()计算修正值，注意跨小时进位（如14:45 → 15:00） - 手动设置
input.value，否则界面不会同步
示例逻辑：
const timeInput = document.querySelector('input[type="time"]');
timeInput.addEventListener('change', () => {
const [h, m] = timeInput.value.split(':').map(Number);
const totalMinutes = h * 60 + m;
const rounded = Math.round(totalMinutes / 30) * 30;
const newH = Math.floor(rounded / 60) % 24;
const newM = rounded % 60;
timeInput.value = `${newH.toString().padStart(2, '0')}:${newM.toString().padStart(2, '0')}`;
});更可靠的做法：改用 range 或自定义下拉菜单
如果需要明确、可控的半小时选项，放弃原生 type="time"：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 用
<input type="range" min="0" max="47" step="1">（48 个半小时档位），配合 label 显示00:00～23:30 - 或直接写
<select></select>，生成 48 个<option value="08:30">08:30</option>项 - 避免依赖
step在 time 输入框上“假装有效”，它在可访问性、移动端兼容性和行为一致性上都不可靠
注意时区与 24 小时制边界
手动计算时间时容易漏掉两点：
-
23:45四舍五入后是00:00（次日），但多数业务场景需要限制在当天，得加if (rounded >= 1440) rounded = 1410（即最多到23:30） - 用户系统时区会影响
new Date().getHours()等方法，而input.value始终是本地时区字符串，别混用 Date API 做转换
原生 time 输入框的 step 是个伪需求入口，真要半小时粒度，就得绕开它，用确定的 DOM 操作和显式逻辑接管。
