HTML DOM Input - Time 对象

HTML 中的 <input /> 元素可以用来创建各种不同类型的输入字段，其中 type 属性用于指定输入字段的类型。其中，<input /> 元素的 type 属性为 "time" 时，会创建一个时间输入字段，允许用户选择时间。

使用方法

<input type="time" id="meeting-time" name="meeting-time">

在上面的示例中，我们创建了一个时间输入字段，id 为 "meeting-time"，name 为 "meeting-time"。

属性

• value: 表示输入字段的值，可以是合法的时间值，例如 "12:00"。
• min: 设置输入字段的最小时间值。
• max: 设置输入字段的最大时间值。
• step: 设置输入字段的时间步长。

事件

• onchange: 当输入字段的值发生改变时触发该事件。
• oninput: 当用户输入值时触发该事件。

方法

• checkValidity(): 检查输入字段的值是否合法，返回 true 或 false。

示例代码

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Time Input Example</title>
</head>
<body>
    <label for="meeting-time">Choose a meeting time:</label>
    <input type="time" id="meeting-time" name="meeting-time" min="09:00" max="18:00" step="900">
    
    <script>
        document.getElementById("meeting-time").addEventListener("change", function() {
            console.log("Meeting time selected: " + this.value);
        });
    </script>
</body>
</html>

在上面的示例中，我们创建了一个时间输入字段，限定了最小时间为 09:00，最大时间为 18:00，时间步长为 15 分钟。当用户选择时间后，会在控制台输出选择的会议时间。