如何以 HH: MM: SS 格式显示 JavaScript 中的当前时间？

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>

DEMO using javaScript only

Update

Updated Demo

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

你可以在 Javascript中这样做。

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

目前它返回 15:5:18。注意，如果任何值小于10，它们将只显示一个数字，而不是两个。

用 < strong > JSFiddle 检查一下

更新:
前缀0的尝试

var time = new Date();
console.log(
("0" + time.getHours()).slice(-2)   + ":" +
("0" + time.getMinutes()).slice(-2) + ":" +
("0" + time.getSeconds()).slice(-2));

您可以使用 等一下 JS来完成此操作。

var now = new moment();
console.log(now.format("HH:mm:ss"));

产出:

16:30:03

可以使用本机函数 Date.toLocaleTimeString():

var d = new Date();
var n = d.toLocaleTimeString();

这将显示如下:

"11:33:01"

Date to LocaleTimeString

var d = new Date();
var n = d.toLocaleTimeString();
alert("The time is: \n"+n);

new Date().toTimeString().slice(0,8)

注意，toLocaleTimeString ()可能返回类似于 9:00:00 AM的内容。

这是一个如何使用 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>

这段代码将在控制台中以 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

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>

使用 等一下 JS和 SetInterval的一种非常简单的方法。

setInterval(() => {
moment().format('h:mm:ss a');
}, 1000)

样本输出

使用 setInterval()设置为1000ms 或1秒，输出将每1秒刷新一次。

下午3时25分50分

这就是我如何在我的一个副项目中使用这个方法。

setInterval(() => {
this.time = this.shared.time;
}, 1000)

也许您想知道使用 setInterval()是否会导致一些性能问题。

SetInterval 是 CPU 密集型的吗？

我不认为 setInterval 本质上会导致严重的性能问题。我怀疑这个名声可能来自于更早的时代，那时 CPU 还没有那么强大。孤独的一天

不，setInterval 本身并不是 CPU 密集型的。如果有很多间隔运行在非常短的周期(或者一个非常复杂的操作运行在一个中等长的间隔) ，那么这很容易变成 CPU 密集型，这取决于您的间隔正在做什么以及它们做的频率。阿罗斯

但是一般来说，在您的站点上大量使用 setInterval 可能会降低速度。20个同时运行的间隔或多或少繁重的工作将影响显示。然后再来一次。.你真的可以搞砸任何部分，我想这不是 setInterval 的问题。...-jAndy

这样使用:

var d = new Date();
localtime = d.toLocaleTimeString('en-US', { hour12: false });

结果: 18:56:31

new Date().toLocaleTimeString('it-IT')

如果需要，it-IT区域设置恰好填充时间，省略 PM 或 AM 01:33:01

new Date().toLocaleTimeString()

紧凑型时钟功能:

setInterval(function() {
let d = new Date()
console.log(`${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`)
}, 1000);

使用

ToLocaleTimeString ()

// Depending on timezone, your results will vary
const event = new Date('August 19, 1975 23:15:30 GMT+00:00');


console.log(event.toLocaleTimeString('en-US'));
// expected output: 1:15:30 AM


console.log(event.toLocaleTimeString('it-IT'));
// expected output: 01:15:30


console.log(event.toLocaleTimeString('ar-EG'));
// expected output: ١٢:١٥:٣٠

来源