最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - How to stop 60 second timer from being "jumpy" (cssjavascript) - Stack Overflow

programmeradmin1浏览0评论

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;
 }
Share Improve this question edited Aug 3, 2014 at 11:05 Humayun Shabbir 3,2694 gold badges22 silver badges33 bronze badges asked Aug 3, 2014 at 9:10 OneezyOneezy 5,0237 gold badges48 silver badges75 bronze badges 1
  • 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
Add a ment  | 

2 Answers 2

Reset to default 6

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.

发布评论

评论列表(0)

  1. 暂无评论