Create Double Digits in Javascript Countdown Timer?

countdown timer in javascript for quiz
javascript timer countdown with seconds
30 minutes countdown timer in javascript
javascript countdown timer with user input
sharepoint countdown timer javascript
laravel countdown timer
css countdown timer
javascript countdown timer code

What javascript would I need to create in order to have the countdown timer always in double digits if a numeral is down to only one digit. If seconds are at 6 I want it to say 06, if hours at 2 want it to say 02 and so on.

Pen: http://codepen.io/zepzia/pen/MmoVJm

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;
}

JS

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

You can use toLocaleString, and set minimum digits to 2, that way when there is only one digit it will prefix it with 0

var x = 8;

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

var y = 12;

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

javascript - Countdown two digits, and works great, but I want to change it for two digits, I mean, If left 2 days then show it as 02 days. This is the script: <script> function renderMessage(dateStr,  How To Create A Countdown Timer Using JavaScript A countdown timer is an accurate timer that can be used for a website or blog to display the count down to any special event, such as a birthday or anniversary.

You could use ('0' + myValue).substr(-2) to fix the length with 2 characters. In this case '01' would be stay as '01' and '012' will be '12' because the -2 will cut the string from the end.

Build a Countdown Timer in Just 18 Lines of JavaScript, Sometimes, you're going to need to build a JavaScript countdown clock. to the beginning of a number and then slice off the last two digits. Build a Countdown Timer in Just 18 Lines of JavaScript. own countdown clock in a mere 18 lines of JavaScript. 0′ to the beginning of a number and then slice off the last two digits.

Do this for all time fields.

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

This code will test the string length of the variable, and if the length is one, will add the digit "0" in front of it. You have to treat this as a string, because the integer '06' will be interpreted as just '6'

How to Build a Countdown Timer in Pure JavaScript, It takes just a few lines of JavaScript to create a customizable timer that counts In the code, you need to prepend every digit with a “0” and return the last two  Learn how to create a countdown timer with JavaScript. Display the countdown timer in an element --> Tip: Learn more about the window.setInterval () method in our JavaScript Reference.

Check if desired numbers are less then 10 and and the 0 as string:

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

Making a jQuery Countdown Timer, There are two digit spans for every time unit (days, hours, minutes and to include the css and js file from the countdown folder in your page. The steps for creating our countdown timer look like: Create a stack of numbers; Create a JavaScript interval for every second; Move the stack of numbers using CSS transforms; New Course: Make 20 React Apps! The HTML. Let's start with all of our HTML. We need two buttons along with all the numbers from 10-0.

My Answer will 100% work

if (days<10) {
document.getElementById("daysTicker").innerHTML ="0"+days ;}else{
document.getElementById("daysTicker").innerHTML =days ;
}
if (hours<10) {
document.getElementById("hoursTicker").innerHTML ="0"+hours ;}else{
document.getElementById("hoursTicker").innerHTML =hours ;
}

if (minutes<10) {
document.getElementById("minsTicker").innerHTML ="0"+minutes ;}else{
document.getElementById("minsTicker").innerHTML =minutes ;
}
if (seconds<10) {
document.getElementById("secsTicker").innerHTML ="0"+seconds ;}else{
document.getElementById("secsTicker").innerHTML =seconds ;
}

How to Create a Countdown Timer, JavaScript · Tutorials; How to Create a Countdown Timer. How to Create a Countdown Timer. Creation. Start by building the countdownTimer function. function  To create a countdown timer in JavaScript we will first need to make it tick with a interval of 1000 milliseconds (1 second). To do this we have to use the window.setTimeout function which will call a JavaScript function after a certain amount of time, like this: window.setTimeout("Tick()", 1000); function Tick() { }.

How to Create an Animated Countdown Timer With HTML, CSS and , Let's see how it will behave if we set two numbers instead of one; in this case, those values are 10 and 30. stroke-dasharray: 10 30. That sets the first section (  In this video, I use the p5.js library to create a web-based countdown timer. I discuss the native JavaScript method setInterval() as well as p5's millis().

How do I display 3 digits for days ('ddd')? · Issue #33 · Reflejo/jquery , I'd like to countdown from a date that is more than 99 days away. I was unable to find a solution so I ended up using/modifying flipclock.js 

Code to provide 3 digit days in countdown [#1931628], jQuery Countdown Timer. Version: i'm new in drupal and javascript. Creates an animated transition between the two numbers function 

Comments
  • I think I prefer the ternary version of this approach that's someone's already posted.