Prepend a "0" to numbers less than 10?

Question

I have a countdown clock that I made with HTML and Javascript. Currently, when it loads, the text will shake on the screen due to having a dynamic width. This is because I am trying to force it to display in the center of the page. I am looking for a way to force the values to always be double digits. Is there a way(through something like an if else statement) that I can prepend a 0 before all values less than 10? I tried implementing something myself, but it didn't work so I commented it out. Here is the code:

<!DOCTYPE html>
<html>
<style>
body {
    background: #ffffff url("http://i.imgur.com/MelSn4S.png") no-repeat left top;
}
@font-face {
   font-family: sensation;
   src: url(arial);
}
div {
    color: white;
    font-family: arial;
    font-size: 60px;
    position: absolute;
    top: 50%;
    margin-left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
</style>
<head>
<script type="text/javascript">
    var tenYearsInSeconds = 315360000;
    var yearInSeconds = 31536000;
    var monthInSeconds = 2592000;
    var dayInSeconds = 84600;
    var hourInSeconds = 3600;
    var minuteInSeconds = 60;

    var timer = window.setInterval(function() {countdown()}, 10);
    var runonce = true;

function countdown() {
    var temp = tenYearsInSeconds;
    var years = Math.floor(temp/yearInSeconds);

    temp = temp % yearInSeconds;
    var months = Math.floor(temp/monthInSeconds);

    temp = temp % monthInSeconds;
    var days = Math.floor(temp/dayInSeconds);

    temp = temp % dayInSeconds;
    var hours = Math.floor(temp/hourInSeconds);

    temp = temp % hourInSeconds;
    var minutes = Math.floor(temp/minuteInSeconds);


    document.getElementById('time').innerHTML = 
        "Years: " + years + 
        " Months: " + months + 
        " Days: " + days + 
        " Hours: " + hours + 
        " Minutes: " + minutes;
    tenYearsInSeconds = tenYearsInSeconds - 30000;

    if (tenYearsInSeconds <=0 && runonce) {
        tenYearsInSeconds = 0;
        runonce = false;
        countdown();
        clearInterval(timer);
    }

//if (years < 10) {
   //years = "0" + years;
//} 

}
</script>
</head>

<body>
<script type="text/javascript">
    countdown();
</script>
<div id="time"></div>
</body>
</html>

Make sure you do the formatting before you display the value (done in the `document.getElementById('time').innerHTML = ...` statement). Based on where your commented out code is, it looks like you were doing it after. — David Sherret, Jan 08 '15 at 18:47
`number = (number < 10) ? '0' + number: number;` if number is less than 10, add preceeding 0. Otherwise don't bother. — Billy Jake O'Connor, Nov 24 '15 at 18:09

Code Whisperer · Answer 1 · 2015-01-08T19:01:23.517

1

while (number.toString().length < desiredLength) {
   number = number.concat(0);
}

And to put it before,

   while (number.toString().length < desiredLength) {
      number = "0".concat(number);
   }

edited Jan 08 '15 at 19:01

answered Jan 08 '15 at 18:39

Code Whisperer

20,934
17
57
82

Even though Tyler used the word `append`, he really meant `prepend` (`Is there a way that I can append a 0 before all values less than 10`). – David Sherret Jan 08 '15 at 18:42
Thanks for catching that, I edited the question to reflect the change. – Tyler Gastineau Jan 08 '15 at 19:11

Prepend a "0" to numbers less than 10?

1 Answers1