javascript函数将当前时间显示为html选择标记的预选值

javascript function to show current time as pre-selected value of html select tag

本文关键字：选择 html 函数 显示 时间 javascript      更新时间：2023-09-26

我想在html中有两个select标记，一个表示小时，一个代表分钟。我希望在当前小时设置小时的默认值，在当前分钟设置分钟的值。我认为默认时间设置为3，我应该有这样的东西：

<select name="hour">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
...
<option value="23">23</option>
</select>

现在我的问题是，如何使用javascript默认显示当前的小时和分钟？

有两种JavaScript Date方法，分别称为.getHours()和.getMinutes()。因此：

<select id="hour" name="hour">...</select>
<select id="minute" name="minute">...</select>

您可以在选择后出现的脚本块中执行以下操作（或称为onload或onDOM ready）：

var currentDateTime = new Date();
document.getElementById("hour").value = currentDateTime.getHours();
document.getElementById("minute").value = currentDateTime.getMinutes();

根据创建option元素的方式，可以使用一种方法：

var now = new Date(),
    // we're adding one because JavaScript returns zero-based hours, 0-23
    hour = now.getUTCHours() + 1,
    sel = document.getElementById('hours'),
    opt;
for (var i=0; i<24; i++){
    opt = document.createElement('option');
    opt.value = i;
    opt.textContent = i;
    sel.appendChild(opt);
    if (i == hour) {
        opt.selected = true;
    }
}

JS Fiddle演示。

这使用JavaScript Date()方法，getUTCHours()

如果您的option元素已经在HTML中设置，并且您只需更改默认情况下的selected：

var now = new Date(),
    hour = now.getUTCHours() + 1,
    sel = document.getElementById('hours'),
    curHour = sel.getElementsByTagName('option')[hour];
curHour.selected = true;

JS Fiddle演示。

参考文献：

  • Date()
相关文章：