I've created a "60 second" countdown timer in javascript and I'm trying to figure out how to make it not "Jumpy".. The main problem is that the fonts characters are not consistent widths. The only way I see going about this is somehow appending each character into it's own div and controlling the width on that div through css. But I'm not really sure how to go about that. Is there a better approach to this?

I know the Greensock's "TweenMax" plugin can handle this, but I'd like to create this myself as opposed to using a library for one small thing.

jsFiddle:** /

HTML:

<div class="row">
    <span class="timer timerback">00:00</span>
    <span id="Timer" class="timer timerfront">60:00</span>
    <span class="seconds">Seconds</span>
</div>

JAVASCRIPT:

var count = 6000;
var counter = setInterval(timer, 10);

function timer()
{
    if (count <= 0)
    {
        clearInterval(counter);
        return;
     }
     count--;
     document.getElementById("Timer").innerHTML=count /100;
 }

I've created a "60 second" countdown timer in javascript and I'm trying to figure out how to make it not "Jumpy".. The main problem is that the fonts characters are not consistent widths. The only way I see going about this is somehow appending each character into it's own div and controlling the width on that div through css. But I'm not really sure how to go about that. Is there a better approach to this?

I know the Greensock's "TweenMax" plugin can handle this, but I'd like to create this myself as opposed to using a library for one small thing.

jsFiddle:** http://jsfiddle/oneeezy/3CreM/1/

HTML:

<div class="row">
    <span class="timer timerback">00:00</span>
    <span id="Timer" class="timer timerfront">60:00</span>
    <span class="seconds">Seconds</span>
</div>

JAVASCRIPT:

var count = 6000;
var counter = setInterval(timer, 10);

function timer()
{
    if (count <= 0)
    {
        clearInterval(counter);
        return;
     }
     count--;
     document.getElementById("Timer").innerHTML=count /100;
 }

• javascript
• html
• css
• countdowntimer
• gsap

• its happening bcz when millisecond goes to single digit like 6,5,4. if you push extra digit for this than u can solve this problem – Hushme Commented Aug 3, 2014 at 9:31

2 Answers 2

Choose a monospace font so that all characters are the same width. The simplest way to do this is add font-family: monospace; to your CSS for the timer element.

Take a look at http://www.google./fonts/ for a good selection of monospace fonts.

You will also need to apply some formatting to the number to make sure the number of seconds is zero padded (i.e. always two digits) and the hundredths have a trailing zero added.

By the way, decrementing a count every time your function is called will not make an accurate timer. Although you set the interval to 10ms, there is no guarantee the function will be called exactly every 10ms, so your timer will drift, especially if there are other scripts on the page. What you should do is record the time at the start of the loop, and calculate the difference between that fixed time and the current time every time the function is called. This is guaranteed not to drift.

Google Chrome tells you your issue's solution if you know how to look. Click your jsFiddle link in Chrome, right-click and inspect element, go to the console tab. In the console tab you'll see

Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)......[etc.]

Taking Chrome's suggestion:

http://jsfiddle/3CreM/5/

Code changes:

.timer { width: 180px; display: inline-block; position: absolute; left: 1em; text-align: right; }

To ->

.timer { width: 180dppx; display: inline-block; position: absolute; left: 1em; text-align: right; }

Adding "dp" to the width's value (180px -> 180dppx) it changes how the browser measures pixels. For more info check out this stack question.