如何阻止 60 秒计时器“跳跃”(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 毫秒调用一次，因此您的计时器会漂移，特别是当页面上有其他脚本时。您应该做的是记录循环开始时的时间，并在每次调用该函数时计算该固定时间与当前时间之间的差值。这样就保证不漂移了。