Question

我在javascript中制作一个可在手机上运行的计数器，它可以在我的电脑上运行，但在我的手机上，计数器从0到2到4等...

我真的需要这个计时器才能工作，我似乎无法在任何地方找到答案。代码在我的计算机上运行，但我认为手机上的Javascript很慢。有没有Javascript的替代品，也许还有一些我不知道的HTML5代码？

我将此脚本放在正文标记中。

<script type="text/javascript">
    var time = 0;
    setInterval(
        function () {
            time += 1;
            document.getElementById("timer").innerHTML = time;
        }, 1000
    );
</script>

Answer 1

将开始时间存储为自纪元以来的时间，该时间由Date.now()函数调用返回。用它来计算每次通话的时差。这不能保证更好地工作，因为你描述的问题是处理速度的问题，但你至少会保持每次通话的正确时间，它不会跳过秒。

存储开始时间：

var startTime = Date.now();

计算自上次通话以来的时差：

var time = Date.now() - startTime;

现在时间以毫秒为单位，您必须将其除以1000并将其四舍五入以丢失小数位：

var seconds = Math.round(time / 1000);

jsfiddle上的示例（在iPhone 6上的Chrome中测试，按预期工作）。

Answer 2

这是一个简单的反例

function countdown(elementName, minutes, seconds) {
var element,endTime,hours,mins,msLeft,time;
function twoDigits(n) {
    return (n <= 9 ? "0" + n : n);
}
function updateTimer() {
    msLeft = endTime - (+new Date);
    if (msLeft < 1000) {
        element.innerHTML = "countdown's over!";
    } else {
        time = new Date(msLeft);
        hours = time.getUTCHours();
        mins = time.getUTCMinutes();
        element.innerHTML = (hours ? hours + ':' + twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds());
        setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
    }
}element = document.getElementById(elementName);
endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
updateTimer();}

调用函数

countdown("countdown", 1, 5);
countdown("countdown2", 100, 0);

Answer 3

优化是选择计时器并将其分配给维护的变量。然后使用变量而不是每次都执行getElementById调用。 DOM操作可能很昂贵，在移动设备上可能尤其如此（取决于设备和DOM）。

试试这个：

<script type="text/javascript">
    var time = 0;
    var timer= document.getElementById("timer");
    setInterval(
        function () {
            time += 1;
            timer.innerHTML = time;
    }, 1000
);

慢速javascript时间计数器在手机上

3 个答案: