代码之家 › 专栏 › 技术社区 › iceiceicy

在Javascript中用HH:MM:SS而不是H:M:S显示倒计时计时器

html jquery javascript

iceiceicy · 技术社区 · 6 年前

我设法用H:M:S格式显示了一个倒计时计时器。

这就是我目前得到的。

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

4 回复 | 直到 6 年前

j08691 6 年前

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

Ravi Tiwari 6 年前

您可以使用任意长度的字符串作为小时、分钟和秒的前缀(也称为padLeft),如下所示:

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

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

Delvian 6 年前

你可以用一个简单的 replace :

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

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

S. Patel 6 年前

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