Question

我设法以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);

<p id="demo"></p>

Answer 1

测试小于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);

<p id="demo"></p>

正如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);

<p id="demo"></p>

Answer 2

您可以使用以下任意长度的字符串为小时，分钟和秒加上（aka padLeft）前缀：

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

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

Answer 3

您可以使用简单的replace来完成此操作：

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

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

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

Answer 4

// 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);

<p id="demo"></p>

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

4 个答案: