如何在 JavaScript 中以 HH:MM:SS 格式显示当前时间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18229022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show current time in JavaScript in the format HH:MM:SS?
提问by user2648752
Can you please tell me how to set time in this format HH:MM:SS .I want to set that this in an div ?
你能告诉我如何以这种格式设置时间 HH:MM:SS 。我想在 div 中设置它吗？
回答by pstryk
You can use native function Date.toLocaleTimeString():
您可以使用本机功能Date.toLocaleTimeString()：
var d = new Date();
var n = d.toLocaleTimeString();
This will display e.g.:
这将显示例如：
"11:33:01"
I found it on http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp
我在http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp上找到了它
var d = new Date();
var n = d.toLocaleTimeString();
alert("The time is: \n"+n);回答by Tushar Gupta - curioustushar
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
// add a zero in front of numbers<10
m = checkTime(m);
s = checkTime(s);
document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
t = setTimeout(function() {
startTime()
}, 500);
}
startTime();<div id="time"></div>DEMOusing javaScript only
仅使用 javaScript 的演示
Update
更新
(function () {
function checkTime(i) {
return (i < 10) ? "0" + i : i;
}
function startTime() {
var today = new Date(),
h = checkTime(today.getHours()),
m = checkTime(today.getMinutes()),
s = checkTime(today.getSeconds());
document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
t = setTimeout(function () {
startTime()
}, 500);
}
startTime();
})();
回答by Praveen
You can do this in Javascript.
您可以在Javascript.
var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
At present it returns 15:5:18. Note that if any of the values are less than 10, they will display using only one digit, not two.
目前它返回15:5:18。请注意，如果任何值小于 10，它们将仅使用一位而不是两位来显示。
Check this in JSFiddle
在JSFiddle 中检查这个
Updates:
For prefixed 0's try
更新：
对于前缀 0 的尝试
var time = new Date();
console.log(
("0" + time.getHours()).slice(-2) + ":" +
("0" + time.getMinutes()).slice(-2) + ":" +
("0" + time.getSeconds()).slice(-2));
回答by brandonscript
回答by Thorsten
new Date().toTimeString().slice(0,8)
Note that toLocaleTimeString() might return something like 9:00:00 AM.
请注意， toLocaleTimeString() 可能会返回类似9:00:00 AM.
回答by Vadamadafaka
function realtime() {
let time = moment().format('h:mm:ss a');
document.getElementById('time').innerHTML = time;
setInterval(() => {
time = moment().format('h:mm:ss a');
document.getElementById('time').innerHTML = time;
}, 1000)
}
realtime();<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<div id="time"></div>A very simple way using moment.jsand setInterval.
使用moment.js和setInterval 的一种非常简单的方法。
setInterval(() => {
moment().format('h:mm:ss a');
}, 1000)
Sample output
样本输出
Using setInterval()set to 1000ms or 1 second, the output will refresh every 1 second.
使用setInterval()设置为 1000ms 或 1 秒，输出将每 1 秒刷新一次。
3:25:50 pm
下午 3:25:50
This is how I use this method on one of my side projects.
这就是我在我的一个副项目中使用这种方法的方式。
setInterval(() => {
this.time = this.shared.time;
}, 1000)
Maybe you're wondering if using setInterval()would cause some performance issues.
也许您想知道使用setInterval()是否会导致一些性能问题。
I don't think setInterval is inherently going to cause you significant performance problems. I suspect the reputation may come from an earlier era, when CPUs were less powerful. ... - lonesomeday
No, setInterval is not CPU intensive in and of itself. If you have a lot of intervals running on very short cycles (or a very complex operation running on a moderately long interval), then that can easily become CPU intensive, depending upon exactly what your intervals are doing and how frequently they are doing it. ... - aroth
But in general, using setInterval really like a lot on your site may slow down things. 20 simultaneously running intervals with more or less heavy work will affect the show. And then again.. you really can mess up any part I guess that is not a problem of setInterval. ... - jAndy
我认为 setInterval 本质上不会给您带来重大的性能问题。我怀疑这种声誉可能来自更早的时代，当时 CPU 的功能不那么强大。... - 孤独的一天
不，setInterval 本身并不是 CPU 密集型的。如果您有很多间隔在很短的周期内运行（或者在中等长的间隔内运行非常复杂的操作），那么这很容易成为 CPU 密集型的，具体取决于您的间隔正在执行的操作以及它们执行的频率。... - 罗斯
但总的来说，在您的网站上经常使用 setInterval 可能会减慢速度。20 个同时运行的间隔或多或少的繁重工作会影响表演。然后再说一遍..你真的可以搞砸任何部分，我想这不是 setInterval 的问题。... - jAndy
回答by Thomas
Use this way:
使用这种方式：
var d = new Date();
localtime = d.toLocaleTimeString('en-US', { hour12: false });
Result: 18:56:31
结果：18:56:31
回答by vanjavk
This code will output current time in HH:MM:SS format in console, it takes into account GMT timezones.
此代码将在控制台中以 HH:MM:SS 格式输出当前时间，它考虑了 GMT 时区。
var currentTime = Date.now()
var GMT = -(new Date()).getTimezoneOffset()/60;
var totalSeconds = Math.floor(currentTime/1000);
seconds = ('0' + totalSeconds % 60).slice(-2);
var totalMinutes = Math.floor(totalSeconds/60);
minutes = ('0' + totalMinutes % 60).slice(-2);
var totalHours = Math.floor(totalMinutes/60);
hours = ('0' + (totalHours+GMT) % 24).slice(-2);
var timeDisplay = hours + ":" + minutes + ":" + seconds;
console.log(timeDisplay);
//Output is: 11:16:55
回答by A.S.Abir
This is an example of how to set time in a div(only_time) using javascript.
这是如何使用 javascript 在 div(only_time) 中设置时间的示例。
function date_time() {
var date = new Date();
var am_pm = "AM";
var hour = date.getHours();
if(hour>=12){
am_pm = "PM";
}
if (hour == 0) {
hour = 12;
}
if(hour>12){
hour = hour - 12;
}
if(hour<10){
hour = "0"+hour;
}
var minute = date.getMinutes();
if (minute<10){
minute = "0"+minute;
}
var sec = date.getSeconds();
if(sec<10){
sec = "0"+sec;
}
document.getElementById("time").innerHTML = hour+":"+minute+":"+sec+" "+am_pm;
}
setInterval(date_time,500);
<per>
<div class="date" id="time"></div>
</per>
