如何制作選擇下拉列表以根據當前時間選擇選項值

Question

我有一個選擇下拉列表，時間間隔為 30 分鍾，例如

11:00 AM, 11:30 AM, 12:00 PM, 12:30 PM, 1:00 PM

從 0:00 AM 開始到 11:30 PM 結束

<select id='time'>
  <option value="11:30 AM">11:30 AM</option>
  <option value="12:00 PM">12:00 PM</option>
  <option value="12:30 PM">12:30 PM</option>
  <option value="1:00 PM">1:00 PM</option>
 <option value="1:30 PM">1:30 PM</option>
 <option value="2:00 PM">2:00 PM</option>
 <option value="2:30 PM">2:30 PM</option>
 <option value="3:00 PM">3:00 PM</option>
 <option value="3:30 PM">3:30 PM</option>
 <option value="4:00 PM">4:00 PM</option>
 <option value="4:30 PM">4:30 PM</option>
</select>

$(document).ready(function(){

  $('#time').val(.now()); // this wouldnt work it gives the current time which may be between 30 min 

});

我希望這個選擇下拉菜單默認為基於當前時間四舍五入到最近的更高時間。

例如。 如果當前時間是上午 10:46，則選擇的值應該是上午 11:00，如果當前時間是上午 10:31，也應該默認為上午 11:00。

關於使用 jquery 或普通 javascript 實現這一點的任何指針。

謝謝

Answer 1

您可以使用Math.round函數將值獲取到最接近的半小時：

Math.round(Date.now()/(30*60*1000))*(30*60*1000));

從中構造一個日期對象並獲取時間。

var date = new Date(Math.round(Date.now() / (30 * 60 * 1000)) * (30 * 60 * 1000));
$('#time').val(date.getHours()%12 + ":" + ("0"+date.getMinutes()).slice(-2) + " " + (date.getHours() >= 12 ? "PM" : "AM"));

這是一個演示： http : //jsfiddle.net/GsR6v/9/

Answer 2

您可以嘗試將 Date 的值四舍五入，如下所示：

var date = new Date(Math.round(Date.now()/(30*60*1000))*(30*60*1000));

然后使用它來設置日期：

$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == <YourDate>; 
}).attr('selected', true);​

在我的小提琴上試試這個： http : //jsfiddle.net/mC869/