javascript - 如何阻止 60 秒计时器成为 "jumpy"(css/javascript)

Question

我在 javascript 中创建了一个“60 秒”倒计时计时器，我正在尝试弄清楚如何让它不“跳动”。主要问题是字体字符的宽度不一致。我看到的唯一方法是以某种方式将每个字符附加到它自己的 div 中，并通过 css 控制该 div 的宽度。但我真的不确定该怎么做。对此有更好的方法吗？

我知道 Greensock 的“TweenMax”插件可以处理这个问题，但我想自己创建这个，而不是为一件小事使用库。

jsFiddle:** http://jsfiddle.net/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;
 }

Answer 1

选择等宽字体，使所有字符的宽度相同。最简单的方法是将 font-family: monospace; 添加到计时器元素的 CSS 中。

看看http://www.google.com/fonts/以获得精选的等宽字体。

您还需要对数字应用一些格式，以确保秒数用零填充(即始终为两位数)并且百分之一的尾随零被添加。

顺便说一句，每次调用您的函数时递减一个计数不会产生一个准确的计时器。虽然您将间隔设置为 10 毫秒，但不能保证该函数会恰好每 10 毫秒调用一次，因此您的计时器会漂移，尤其是当页面上还有其他脚本时。你应该做的是在循环开始时记录时间，并在每次调用函数时计算该固定时间与当前时间之间的差值。这保证不会漂移。