在 HH:MM:SS 中显示倒数计时器，而不是在 Javascript 中的 H:M:S答案

【问题标题】：Show countdown timer in HH:MM:SS instead of H:M:S in Javascript在 HH:MM:SS 中显示倒数计时器，而不是在 Javascript 中的 H:M:S
【发布时间】：2019-02-06 15:44:15
【问题描述】：

我设法以 H:M:S 格式显示倒数计时器。

我可以知道如何将其显示为 HH:MM:SS 格式吗？例如，假设 300 小时 1 分 1 秒，它将显示为 300:01:01 而不是 300:1:1。

这是我目前得到的。

// Set the date we're counting down to
var countDownDate = new Date("Aug 31, 2019 22:55:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var hours = Math.floor(distance / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = hours + " : "
  + minutes + " : " + seconds + "";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

&lt;p id="demo"&gt;&lt;/p&gt;

【问题讨论】：

看看moment.js
@itdoesntwork 这个问题当然不需要 moment.js.. 我感觉 moment.js 正在成为新的 jQuery...
可能重复：stackoverflow.com/questions/14638018/…
@FabioManzano 它似乎不是那个的副本。
添加一个 '0'，读取最后 2 个字符：('0' + minutes).slice(-2)

标签： javascript jquery html

【解决方案1】：

// Set the date we're counting down to
var countDownDate = new Date("Aug 31, 2019 22:55:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var hours = Math.floor(distance / (1000 * 60 * 60));
  var minutes = (`0${Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))}`).substr(-2); ;
  var seconds = (`0${Math.floor((distance % (1000 * 60)) / 1000)}`).substr(-2);



  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = `${hours}:${minutes}:${seconds}`;

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

&lt;p id="demo"&gt;&lt;/p&gt;

【讨论】：

如果你解释你做了什么而不只是转储代码并期望人们弄清楚，这通常是最有帮助的。

【解决方案2】：

你可以用一个简单的replace来做到这一点：

var timeString = (hours + ':' + minutes + ':' + seconds).replace(/\b(\d)\b/g, '0$1');

编辑：如果您不想在小时前加上零：

var timeString = (hours + ':' + minutes + ':' + seconds).replace(/:(\d)\b/g, ':0$1');

【讨论】：

【解决方案3】：

您可以在小时、分钟和秒前加上任意长度的字符串，如下所示：

function padLeft(padding, data) {
    return +(padding + data).slice(-padding.length);
}

padLeft('00', 3) // '03'
padLeft('00', 13) // '13'
padLeft('0000', 3) // '0003'

【讨论】：

【解决方案4】：

测试小于 10 的值并附加前导零

// Set the date we're counting down to
var countDownDate = new Date("Aug 31, 2019 22:55:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var hours = Math.floor(distance / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  if (hours < 10) hours = '0'+ hours;
  if (minutes < 10) minutes = '0'+ minutes;
  if (seconds < 10) seconds = '0'+ seconds;

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = hours + " : "
  + minutes + " : " + seconds + "";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

&lt;p id="demo"&gt;&lt;/p&gt;

正如评论中提到的kamoroso94，您也可以使用padstart()

// Set the date we're counting down to
var countDownDate = new Date("Aug 31, 2019 22:55:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var hours = Math.floor(distance / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = hours.toString().padStart(2, '0') + " : "
  + minutes.toString().padStart(2, '0') + " : " + seconds.toString().padStart(2, '0') + "";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

&lt;p id="demo"&gt;&lt;/p&gt;

【讨论】：

String#padStart 也可以！
@kamoroso94 不错，更新了答案以提及