在Javascript倒數計時器中創建雙位數？

如果一個數字只有一位數字，爲了讓倒數計時器總是以兩位數的方式創建，我需要創建什麼樣的JavaScript。如果秒數是6，我希望它說06，如果2小時想要它說02，依此類推。在Javascript倒數計時器中創建雙位數？

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet"> 

<body> 
    <div class="countdown-wrapper"> 
    <div id="countdown-text"> 
     <div class="timer"> 
     <div id="daysTicker" class="countdown"></div> 
     <div class="counter-text">DAYS</div> 
     </div> 
     <div class="timer"> 
     <div id="hoursTicker" class="countdown"></div> 
     <div class="counter-text">HOURS</div> 
     </div> 
     <div class="timer"> 
     <div id="minsTicker" class="countdown"></div> 
     <div class="counter-text">MINS</div> 
     </div> 
     <div class="timer"> 
     <div id="secsTicker" class="countdown"></div> 
     <div class="counter-text">SECS</div> 
     </div> 
    </div> 
    </div> 
</body>

CSS

body { 
    background:url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG); 
    background-size:cover; 
    background-position:center center; 
    background-attachment:fixed; 
} 

.countdown-wrapper { 
    position: relative; 
    height: 400px; 
} 

#countdown, #countdown-text { 
    font-family: 'Roboto', sans-serif; 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}   

.countdown { 
    font-weight: 900; 
    font-size: 142px; 
    color: #fff; 
    opacity: .7; 
    letter-spacing: -4px; 
} 

.counter-text { 
    font-weight: 900; 
    font-size: 40px; 
    color: black; 
    opacity: .8; 
    text-align: center; 
} 


.timer { 
    display: inline-block; 
    margin: 10px; 
}

// Set the date we're counting down to 
var countDownDate = new Date("Oct 7, 2017 12: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); 


    // Display the result in the element with id="demo" 
    document.getElementById("daysTicker").innerHTML = days; 
    document.getElementById("hoursTicker").innerHTML = hours; 
    document.getElementById("minsTicker").innerHTML = minutes; 
    document.getElementById("secsTicker").innerHTML = seconds; 

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

來源

2017-05-03 Tripp

可以使用的toLocaleString，並設置最低位爲2，這樣，當只有一個數字將與0

var x = 8; 
 

 
console.log(x.toLocaleString(undefined,{minimumIntegerDigits: 2})); 
 

 
var y = 12; 
 

 
console.log(y.toLocaleString(undefined,{minimumIntegerDigits: 2}));

它的前綴

來源

2017-05-03 13:27:38 naortor

這樣做對所有的時間字段。

if((hours+"").length === 1){ 
    hours = "0"+hours; 
}

該代碼將測試變量的字符串的長度，並且如果該長度爲一個，將在它的前面加上數字「0」。你必須把這個作爲一個字符串，因爲整數「06」將被解釋爲只是「6」

來源

2017-05-03 13:13:39

檢查所需的數字是小於10和0作爲字符串：

document.getElementById("daysTicker").innerHTML = (days < 10) ? ('0' + days) : days;

來源

2017-05-03 13:18:49 Dimcho

你可以使用('0' + myValue).substr(-2)將長度固定爲2個字符。在這種情況下，'01'將保持爲'01'，'012'將爲'12'，因爲-2將從尾部切下字符串。

來源

2017-05-03 13:19:55 hakany

在Javascript倒數計時器中創建雙位數？

回答

相關問題