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

如何在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>

00am
凌晨1点
凌晨2点
.
.
.
晚上9点
晚上10点
晚上11点

到目前为止，我已经尝试过：

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

for（变量i=0，j=0；i<12，j<24；i++，j++）{
console.log（this.addZero（i）+“AM”）；
控制台日志（j）；
如果（i>11）{
console.log（）
}
$（“#fromHour”）.append（“+this.addZero（i）+AM”）
$（“#toHour”）.append（“+this.addZero（i）+AM”）；
}

在

i

大于

11

后，应显示

PM

，且值应递增

怎么做

从一个变量开始，

ampm

，其中包含

“AM”

从

for

循环条件中删除

i<12

（它后面的逗号使

for

循环无效）

在循环的顶部：

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

然后对选项值的部分使用

j

，而不是

i

，并对显示使用

i

和

ampm

从一个变量开始，

ampm

，其中包含

“AM”

从

for

循环条件中删除

i<12

（它后面的逗号使

for

循环无效）

在循环的顶部：

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

---

然后对选项值的部分使用

j

，而不是

i

，并对显示使用

i

和

ampm

。

从您的代码中，我猜这就是您实际要做的：

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

var tp=“AM”；
对于（变量i=0；i<24；i++）{
var t=i；
如果（i==12）{
tp=“PM”；
}否则，如果（i>12）{
t-=12；
}
console.log（this.addZero（t）+tp）；
$（“#fromHour”）.append（“+this.addZero（t）+tp+”）；
$（“#toHour”）.append（“+this.addZero（t）+tp+”）；
}

---

当您尝试格式化代码以使其尽可能可读时，它会有所帮助。

从您的代码中，我猜这就是您实际要做的：

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

var tp=“AM”；
对于（变量i=0；i<24；i++）{
var t=i；
如果（i==12）{
tp=“PM”；
}否则，如果（i>12）{
t-=12；
}
console.log（this.addZero（t）+tp）；
$（“#fromHour”）.append（“+this.addZero（t）+tp+”）；
$（“#toHour”）.append（“+this.addZero（t）+tp+”）；
}

---

当您试图格式化代码以使其尽可能可读时，它会有所帮助。

有几种方法可以做到这一点。这里有一个简单的方法来使用您开始使用的代码

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

var i=0；
var dayshalf=“AM”；
对于（j=0；j12？j-12:j；
dayshalf=j<12？“上午”：“下午”；
console.log（this.addZero（i）+dayHalf）；
控制台日志（j）；
$（“#fromHour”）.append（“+this.addZero（i）+dayshalf”）
$（“#toHour”）.append（“+this.addZero（i）+dayshalf”）；
}

---

您并不真正需要'i'或'dayHalf'变量，但为了清晰起见，我将它们包括在内。

有几种方法可以做到这一点。下面是一个简单的方法，介绍您开始使用的代码

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

var i=0；
var dayshalf=“AM”；
对于（j=0；j12？j-12:j；
dayshalf=j<12？“上午”：“下午”；
console.log（this.addZero（i）+dayHalf）；
控制台日志（j）；
$（“#fromHour”）.append（“+this.addZero（i）+dayshalf”）
$（“#toHour”）.append（“+this.addZero（i）+dayshalf”）；
}

---

您实际上不需要“i”或“dayHalf”变量，但为了清晰起见，我将它们包括在内。

如果您希望有一个下拉列表显示

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

//不知道addZero（）是什么样子，我只是填充了它，让演示正常工作。
window.addZero=函数（值）{
变量pad='00'；
返回pad.substring（0，pad.length-value.toString（）.length）+值；
}
对于（变量i=1；i<25；i++）{
var am='am'，
pm=‘pm’，
ampm，
时间单位，
时间价值，
时间戳；
时间单位=i>12？i-12:i；
ampm=i<12 | i>23？上午：下午；
timeValue=此.addZero（时间单位）；
时间戳=时间值+''+ampm；
optionMarkup=“”+时间戳+”；
$（“#fromHour”）.append（可选标记）；
$（“#toHour”）。追加（可选标记）；
//如果您想让最后12个上午保持在顶部，请使用下面的命令并删除上面的附加命令：
//如果（i==24）{
//$（“#fromHour”）。预编（可选标记）；
//$（“#toHour”）。预支（可选标记）；
//}否则{
//$（“#fromHour”）.append（可选标记）；
//$（“#toHour”）。追加（可选标记）；
//}
}

---

-使用上午/下午12小时格式创建24小时的时间选项

---

---

如果您希望有一个下拉列表显示

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

//不知道addZero（）是什么样子，我只是填充了它，让演示正常工作。
window.addZero=函数（值）{
变量pad='00'；
returnpad.substring（0，pad.length-value.toString（）.length）+value；
}
对于（变量i=1；i<25；i++）{
var am='am'，
pm=‘pm’，
ampm，
时间单位，
时间价值，
时间戳；
时间单位=i>12？i-12:i；
ampm=i<12 | i>23？上午：下午；
timeValue=此.addZero（时间单位）；
时间戳=时间值+''+ampm；
optionMarkup=“”+时间戳+”；
$（“#fromHour”）.append（可选标记）；
$（“#toHour”）。追加（可选标记）；
//如果您想让最后12个上午保持在顶部，请使用下面的命令并删除上面的附加命令：
//如果（i==24）{
//$（“#fromHour”）。预编（可选标记）；
//$（“#toHour”）。预支（可选标记）；
//}否则{
//$（“#fromHour”）.append（可选标记）；
//$（“#toHour”）。追加（可选标记）；
//}
}

---

-使用上午/下午12小时格式创建24小时的时间选项

---

---

如果不能在一个循环内完成，为什么不使用两个循环？如果不能在一个循环内完成，为什么不使用两个循环