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

Question

你能告诉我如何设置这种格式的时间HH:MM:SS.我想在div中设置这个吗？

Answer 1

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仅使用javaScript

更新

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

Answer 2

您可以使用本机功能Date.toLocaleTimeString():

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

这将显示例如:

"11:33:01"

我在http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp上找到了它

Answer 3

你可以这样做Javascript.

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

目前它返回15:5:18.请注意,如果任何值小于10,它们将仅使用一个数字而不是两个数字显示.

在JSFiddle中检查一下

更新:
对于前缀0的尝试

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

Answer 4

你可以使用moment.js来做到这一点.

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

输出:

16:30:03

Answer 5

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

请注意,toLocaleTimeString()可能会返回类似的内容9:00:00 AM.

Answer 6

使用这种方式：

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

结果：18:56:31

Answer 7

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>

使用moment.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 的问题。... - 杰安迪

Answer 8

紧凑的时钟功能：

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