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

从变量ampm开始，其中包含"AM"。
从i < 12循环条件中移除for（使for循环失效后的逗号）。

在循环的顶部：

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>");
}

你真的不需要＆＃39; i＆＃39;或者＆＃39; dayHalf＆＃39;变量，但为了清楚起见我将它们包括在内

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);
    //}
}

DEMO - 使用AM / PM的12小时格式创建24小时的时间选项

如何以12小时AM / PM格式添加24小时选项？

4 个答案: