如何以12小時AM / PM格式添加24小時選項？

Question

如何在JavaScript中使用for循環顯示以下內容：

    <option value="00">00 AM</option>
    <option value="01">01 AM</option>
    <option value="02">02 AM</option> 
    .
    .
    .
    <option value="21">09 PM</option>
    <option value="22">10PM</option>
    <option value="23">11PM</option>

到目前為止，我已經嘗試過了：

for (var i = 0, j = 0; i < 12, j < 24; i++, j++) {
    console.log(this.addZero(i) + "AM");
    console.log(j);
    if (i > 11) {
        console.log()
    }
    $("#fromHour").append("<option value='" + this.addZero(i) + "'>" + this.addZero(i) + "AM</option>")
    $("#toHour").append("<option value='" + this.addZero(i) + "'>" + this.addZero(i) + "AM</option>");
}

當i大於11它應該顯示PM並且值應該增加。

怎么做？

Answer 1

1. 從變量ampm ，其中有"AM" 。

2. 從for循環條件中刪除i < 12 （使for循環無效的逗號）。

3. 在循環的頂部 ：

    if (i === 12) { ampm = "PM"; } else if (i > 12) { i -= 12; } 

然后將j用作選項值的一部分，而不是i ，並將i和ampm用作顯示內容。

Answer 2

從您的代碼中，我猜測這實際上是您要嘗試執行的操作：

var tp = "AM";

for(var i = 0; i < 24; i++) {

    var t = i;

    if (i == 12) {
        tp = "PM";
    } else if (i > 12) {
        t -= 12;
    }

    console.log(this.addZero(t) + tp);

    $("#fromHour").append("<option value='"
        + this.addZero(i) + "'>" + this.addZero(t) + tp + "</option>");
    $("#toHour").append("<option value='"
        + this.addZero(i) + "'>" + this.addZero(t) + tp + "</option>");
}

當您嘗試格式化代碼以使其盡可能可讀時，它會有所幫助。

Answer 3

有兩種方法可以做到這一點。 這是您開始使用的代碼的一種簡單方法。

var i = 0;
var dayHalf = "AM";
for(j=0;j<24;j++){
    i = j == 0 ? 12 : j > 12 ? j - 12 : j;
    dayHalf = j < 12 ? "AM" : "PM";

    console.log(this.addZero(i) + dayHalf);
    console.log(j);

    $("#fromHour").append("<option value='"+this.addZero(i)+"'>"+this.addZero(i) + dayHalf"</option>")
    $("#toHour").append("<option value='"+this.addZero(i)+"'>"+this.addZero(i) + dayHalf"</option>");
}

您實際上並不需要'i'或'dayHalf'變量，但是為了清楚起見，我將它們包括在內。

Answer 4

如果要顯示一個下拉菜單，顯示01 AM, 02 AM...11 AM, 12 PM, 01 PM...11 PM, 12 AM ，則可以執行以下操作：

// no idea what your addZero() looks like, I just poly-filled it for demo to work.
window.addZero = function(value){
    var pad = '00';

    return pad.substring(0, pad.length - value.toString().length) + value;
}

for (var i = 1; i < 25; i++) {
    var am = 'AM',
        pm = 'PM',
        ampm,
        timeUnit,
        timeValue,
        timeStamp;

    timeUnit = i > 12 ? i - 12 : i;
    ampm = i < 12 || i > 23 ? am : pm;

    timeValue = this.addZero(timeUnit);
    timeStamp = timeValue + ' ' + ampm;

    optionMarkup = "<option value='" + timeValue + "'>" + timeStamp + "</option>";


    $("#fromHour").append(optionMarkup);
    $("#toHour").append(optionMarkup);

    // if you want to have the last 12 AM to be at the top use the below and remove above append:
    //if(i === 24){
    //    $("#fromHour").prepend(optionMarkup);
    //    $("#toHour").prepend(optionMarkup);
    //} else{
    //    $("#fromHour").append(optionMarkup);
    //    $("#toHour").append(optionMarkup);
    //}
}

---

演示 -使用12小時格式和AM / PM創建24小時的時間選項

---