Question

我在javascript中创建了一个“60秒”倒数计时器，我正在试图弄清楚如何使它不是“Jumpy”..主要问题是字体字符的宽度不一致。我看到这个的唯一方法是以某种方式将每个字符附加到它自己的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

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

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

您还需要对数字应用一些格式，以确保秒数为零填充（即始终为两位数），百分之一的尾数为零。

顺便说一下，每次调用函数时递减计数都不会产生准确的计时器。虽然您将间隔设置为10ms，但无法保证每10ms都会调用该函数，因此您的计时器将会漂移，尤其是如果页面上还有其他脚本。你应该做的是记录循环开始时的时间，并在每次调用函数时计算固定时间和当前时间之间的差异。保证不会漂移。

Answer 2

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

考虑使用'dppx'单位而不是'dpi'，因为在CSS中'dpi'表示每CSS英寸点数，而不是每物理英寸点数，因此不符合实际的'dpi'一个屏幕。在媒体查询表达式中：只有屏幕和（-webkit-min-device-pixel-ratio：2），不是全部，不是全部，只有屏幕和（最小分辨率：192dpi），只有屏幕和（最小分辨率：2dppx） ...... [其他]

采取Chrome的建议：

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

代码更改：

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

收件人 - ＆gt;

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

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

如何阻止60秒计时器“跳跃”（css / javascript）

2 个答案: