[英]How to add options for 24 hours in 12 hour AM/PM format?
How to display the below, using for loop in JavaScript?: 如何在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>
I have tried this so far: 到目前为止,我已经尝试过了:
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>");
}
After i
is greater than 11
it should display PM
and value should be incremented. 当
i
大于11
它应该显示PM
并且值应该增加。
How to do that? 怎么做?
Start out with a variable, ampm
, which has "AM"
in it. 从变量
ampm
,其中有"AM"
。
Remove the i < 12
from the for
loop condition (the comma after it makes the for
loop invalid). 从
for
循环条件中删除i < 12
(使for
循环无效的逗号)。
At the top of the loop: 在循环的顶部 :
if (i === 12) { ampm = "PM"; } else if (i > 12) { i -= 12; }
Then use j
for the part of the option value, rather than i
, and use i
and ampm
for the display. 然后将
j
用作选项值的一部分,而不是i
,并将i
和ampm
用作显示内容。
From your code, I'm guessing that this is what you are actually trying to do: 从您的代码中,我猜测这实际上是您要尝试执行的操作:
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>");
}
It helps when you try to format your code to make it as readable as possible. 当您尝试格式化代码以使其尽可能可读时,它会有所帮助。
There are a couple of ways to do this. 有两种方法可以做到这一点。 Here's a simple way with the code you started with.
这是您开始使用的代码的一种简单方法。
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>");
}
You don't really need the 'i' or 'dayHalf' variables, but I included them for clarity. 您实际上并不需要'i'或'dayHalf'变量,但是为了清楚起见,我将它们包括在内。
If you want to have a dropdown showing 01 AM, 02 AM...11 AM, 12 PM, 01 PM...11 PM, 12 AM
you can do this similar to this: 如果要显示一个下拉菜单,显示
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 - Create time options for 24 hours using 12 hour format with AM/PM 演示 -使用12小时格式和AM / PM创建24小时的时间选项
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.