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

Answer 2

如果您知道如何查看，Google Chrome 会告诉您问题的解决方案。单击 Chrome 中的 jsFiddle 链接，右键单击并检查元素，转到控制台选项卡。在控制台选项卡中，您会看到

考虑使用“dppx”单位而不是“dpi”，因为在 CSS 中“dpi”表示每 CSS 英寸的点数，而不是每物理英寸的点数，因此与实际的“dpi”不对应一个屏幕。在媒体查询表达式中：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) ......[等等]

采纳 Chrome 的建议：

http://jsfiddle.net/3CreM/5/

代码更改：

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

到->

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

将“dp”添加到宽度值（180px -> 180dppx）会改变浏览器测量像素的方式。欲了解更多信息，请查看此stack question。