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

Question

我希望在html中有两个选择标记，一个是小时，一个是分钟。我希望在当前小时设置小时的默认值，并在当前分钟设置分钟的值。我觉得跟例如在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来默认显示当前的小时和分钟？

Answer 1

根据您是创建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 demo。

它使用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 demo。

参考文献：

• Date()。

Answer 2

有JavaScript调用.getHours()和.getMinutes()。因此，考虑：

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

你可以做这样的事情，该选择后出现（或称为onload事件或DOM准备）的脚本块如下：

var currentDateTime = new Date(); 

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