logo标签列表

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

javascriptdatetime
141

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

这是我的代码：http://jsfiddle.net/naveennsit/yd99X/ - user2648752
1
但问题是它有 PM 和 AM，我不需要。其次是 24 小时制格式。 - user2648752
@user2648752，请查看我的答案演示http://jsfiddle.net/cse_tushar/fKKSb/。 - Tushar Gupta - curioustushar
1
嗯...为什么这个问题被标记为[tag:date]，即使用户是在询问时间呢？ - Lloyd Dominic
14个回答
171

你可以使用本地函数 Date.toLocaleTimeString()：

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

这将显示例如：

"11:33:01"

MDN: Date toLocaleTimeString 

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

6
我认为这应该是被接受的答案，因为它准确回答了问题，使用了本地函数，并且是获取所需内容的最短有效代码。 - Christoph Lösch
29
它给我的是下午3:59:45，但这不是要求的格式。 - Ivan
toLocaleTimeString不是一个函数。 - User
3
new Date().toLocaleTimeString()：获取当前时间并转化为本地时间格式。 - aljgom
8
这完全取决于系统/浏览器设置。有时你会看到“22:11:33”，有时是“10:11:33 PM”。 - Kavindu Pasan Kavithilaka
134

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>

演示仅使用JavaScript

更新

更新的演示

(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();
})();
82
你可以在 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));
是的，但我需要根据问题所述添加三列。请先阅读问题。我需要在第一列添加时间，第二列添加实时数据。 - user2648752
你需要像Tushar在他的回答中所做的那样考虑到分钟和秒钟小于10的情况，否则它不会显示前导“0”。 - keepitreal
@CleverGirl 我试图给出简单的答案，所以我写了那个。既然你提到了前导0，我想用@user113716的答案来解决这个问题，他的回答表述得非常清楚。 - Praveen
1
另外，对于前导0，请尝试使用String(date.getMinutes()).padStart(2, "0");，这将在不足两位数时添加一个0。 - user8094363
46

你可以使用moment.js来完成这个任务。

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

输出：

16:30:03
4
谢谢你，Remus。我再也不会陷入js日期时间操作的无名深渊了。 - matlembo
谢谢你！其他人总是把事情弄得很复杂，这是为需要快速获取简单代码的人提供最简明扼要的回答！ - ChairmanMeow
9
通过包含一个20k+脚本来隐藏执行此操作所需的约120字节！天才。 - frumbert
1
嘿，我不是说你应该总是使用它，但如果你已经在使用，为什么不用简单的方式呢？ - brandonscript
37
new Date().toTimeString().slice(0,8)

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

2
这是我第一次看到有人使用实例化日期的代码示例而不使用 new Date()... 这种做法常规吗？ - OG Sean
21

使用方法：

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

结果：18:56:31

5

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)

示例输出

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

下午3:25:50

这是我在一个旁边的项目中使用此方法的方式。

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

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

setInterval 是 CPU 密集型吗？

我认为 setInterval 并不会导致显著的性能问题。我怀疑它的声誉来自早期，那时 CPU 的功率较低。... - lonesomeday

没有，setInterval 本身并不是 CPU 密集型的。如果您有很多间隔时间非常短的间隔器（或者一个在适度长时间间隔上运行的非常复杂的操作），那么这很容易变得 CPU 密集型，具体取决于您的间隔器正在做什么以及它们频繁地执行操作的程度。... - aroth

但总的来说，在您的网站上大量使用 setInterval 可能会减慢事情的速度。20 个同时运行的间隔器，无论如何重要的是它们的负载，都会影响展示效果。再次强调..您真的可以弄乱任何部分，我想这不是 setInterval 的问题。... - jAndy

5

紧凑的时钟功能：

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

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

it-IT 区域设置会在必要时填充小时，并省略 PM 或 AM 标记，例如 01:33:01

1
这段代码相对于现有的展示如何使用.toLocaleTimeString()的解决方案，提供了什么样的独特优势？ - Jason Aller
“it-IT”部分表示输出与console.log(event.toLocaleTimeString('it-IT'))相同； // 预期输出：01:15:30 如果不包括“it-IT”，则会得到类似于“1:15:30 PM”的结果，这会丢失初始的0并添加“PM”，否则您必须去掉它。我编辑了我的答案来澄清这一点。 - iamnotsam
2

这段代码将在控制台中以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
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接