HTML DOM Input Time用法及代码示例

HTML DOM中的Input Time对象表示类型为“time”的<input>元素。可以使用getElementById()方法访问时间属性。

用法:

document.getElementById("id");

将id分配给<input>标签的位置。

属性值：

list:它返回包含时间字段的数据列表的参考。
form:它返回包含时间字段的表单的引用。
autocomplete:它用于设置或返回时间字段的自动完成属性的值。
autofocus:它用于设置或返回页面加载时时间字段是否应自动获得焦点。
defaultvalue:它用于设置或返回时间字段的默认值。
disabled:它用于设置或返回是否禁用时间字段。
max:它用于设置或返回时间字段的max属性的值。
min:它用于设置或返回时间字段的min属性的值。
name:它用于设置或返回时间字段的name属性的值。
readOnly:它用于设置或返回时间字段是否为只读。
required:它用于设置或返回在提交表单之前是否必须填写时间字段。
size:它用于设置或返回时间字段的size属性的值。
type:它返回时间字段所属的表单元素的类型。
value:它用于设置或返回时间字段的value属性的值。

范例1：本示例描述了getElementById()方法，该方法用于访问type = “time”属性的<input>元素。

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            DOM Input Time Object  
        </title> 
    </head>  
      
    <body>  
        <center>  
            <h1 style = "color:green;">  
                GeeksForGeeks  
            </h1>  
              
            <h2>DOM Input Time Object</h2>  
                  
            <label for = "uname" style = "color:green"> 
                <b>Enter time</b> 
            </label> 
              
            <input type = "time" id = "gfg" 
                placeholder = "Enter time"> 
              
            <br><br> 
                  
            <button type = "button" onclick = "geeks()">  
                Click 
            </button>  
              
            <p id = "GFG"></p> 
              
            <script>  
                function geeks() {  
                    var link = document.getElementById("gfg").value;  
                    document.getElementById("GFG").innerHTML = link; 
                }  
            </script>  
        </center> 
    </body>  
</html>

输出：
之前单击按钮：

单击按钮后：

范例2：此示例描述了document.createElement()方法，用于创建具有type = “time”属性的<input>元素。

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            DOM Input URL Object 
        </title> 
    </head>  
      
    <body>  
    <center> 
        <h1 style="color:green">  
            GeeksForGeeks  
        </h1>  
              
        <h2>DOM Input time Object </h2>  
                  
         
              <label for = "uname" style = "color:green"> 
                <b>Enter time</b> 
        </label> 
           <p id="GFG"></p> 
        <button type = "button" onclick = "myGeeks()">  
            Click 
        </button>  
              
         
              
        <script>  
            function myGeeks() {  
                var link = document.createElement("INPUT"); 
                link.setAttribute("type", "time"); 
                link.setAttribute("value", "08:08:19"); 
                document.getElementById("GFG").appendChild(link); 
            }  
        </script>  
        </center> 
    </body>  
</html>

输出：
之前单击按钮：

之前单击按钮：

相关用法

注：本文由纯净天空筛选整理自bestharadhakrishna大神的英文原创作品 HTML | DOM Input Time Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。