【问题标题】:How to format a number to always be double digits before the decimal如何将数字格式化为小数点前始终为两位数
【发布时间】:2018-05-14 14:03:36
【问题描述】:

我已经建立了一个倒计时时钟,我需要分钟和秒来始终显示两位数。目前时钟运行完美,但当秒数和分钟数低于 2 位数时,它只显示个位数。 (就像 10 以下的任何东西一样。)是否有 jQuery .format() 或类似的东西来格式化我的输出数字?

这是我的 JS:

// Set the date we're counting down to
    var countDownDate = new Date("March 27, 2019 00:00: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 an the count down date
    var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
 // Output the result in an element with id="demo"
     document.getElementById("countdown").innerHTML = '<div class="timer-wrapper"><div class="time">' + days + ':</div><span class="text">DAYS</span></div><div class="timer-wrapper"><div class="time">' + hours + ':</div><span class="text">HOURS</span></div><div class="timer-wrapper"><div class="time">' +
            minutes + ':</div><span class="text">MINUTES</span></div><div class="timer-wrapper"><div class="time">' + seconds + '</div><span class="text">SECONDS</span></div>';

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

这是我的 HTML:

<div class="countdown-timer-wrapper">
     <div class="timer" id="countdown"></div>
</div>

提前致谢。 :)

【问题讨论】:

标签: jquery html countdown


【解决方案1】:

使用("0" + number).slice(-2),格式化数字

试试下面的代码sn-p

// Set the date we're counting down to
    var countDownDate = new Date("March 27, 2019 00:00: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 an the count down date
    var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
    var days =  Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours =  ("0" +Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2);
    var minutes = ("0" + Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).slice(-2);
    var seconds =  ("0" + Math.floor((distance % (1000 * 60)) / 1000)).slice(-2);
 // Output the result in an element with id="demo"
     document.getElementById("countdown").innerHTML = '<div class="timer-wrapper"><div class="time">' + days + ':</div><span class="text">DAYS</span></div><div class="timer-wrapper"><div class="time">' + hours + ':</div><span class="text">HOURS</span></div><div class="timer-wrapper"><div class="time">' +
            minutes + ':</div><span class="text">MINUTES</span></div><div class="timer-wrapper"><div class="time">' + seconds + '</div><span class="text">SECONDS</span></div>';

  // If the count down is over, write some text 
     if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);
<div class="countdown-timer-wrapper">
     <div class="timer" id="countdown"></div>
</div>

【讨论】:

  • 这太棒了!非常感谢!现在有没有办法确保我的天数在低于 10 天后也会显示两位数?我知道目前它显示 316 天,当我使用与您在小时、分钟和秒上相同的格式时,它会切断 3 并仅显示 16 天。 @programtreasures
猜你喜欢
  • 2011-09-02
  • 2011-06-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-10-12
相关资源
最近更新 更多