JavaScript 时钟在移动设备上不显示当前时间

Question

我得到了这个 JavaScript 在我的网站上显示当前时间的代码，非常适合桌面设备，但不适用于移动设备

在用户访问页面时卡住

有什么办法可以做到这一点吗？每秒刷新脚本以显示当前时间或任何其他解决方案？

document.getElementById("clock").innerHTML = GetTime();

function GetTime(){
    var d = new Date();
    var nhour = d.getHours(),nmin=d.getMinutes();
    if (nmin<=9) { 
        nmin = "0" + nmin 
    }
    return nhour+":"+nmin+"";
}

<span id="clock"></span>

非常感谢您的帮助！

编辑： 感谢 mdickin 我意识到即使在桌面上时钟也不会更新。所以整个代码都有问题。

Answer 1

是的，您可以使用 setInterval，它会定期（以毫秒为单位）运行函数。

function setTime()
{
    document.getElementById("clock").innerHTML = GetTime();
}

setInterval(setTime,1000);

您可以更改毫秒数以适应，具体取决于您想要的准确度...但我怀疑您是否需要担心任何一种方式都超过一秒。

这里是 link，其中包含有关 setInterval and setTimeout

的更多信息

Answer 2

这是我用 codepen 编写的一个简单程序，用于创建实时 JS 计时器。基本上您需要做的就是在 setTimeout 函数中调用该函数并提供以毫秒为单位的频率。

function startTimer() {
  var today = new Date();
  var hours = today.getHours();
  var mins = today.getMinutes();
  var sec = today.getSeconds();
  mins = checkTime(mins);
  sec = checkTime(sec);
  document.getElementById('timer').innerHTML =
    hours + ":" + mins + ":" + sec;
  var t = setTimeout(startTimer, 100);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i
  };
  return i;
}

<body onLoad="startTimer()">
  <div id="timer"></div>
</body>

这是我的 codepen

的 link

Answer 3

每秒使用 setInterval 到运行您的 GetTime() 函数：

document.getElementById("clock").innerHTML = GetTime();

function GetTime(){
        var d = new Date();
        var nhour = d.getHours(),nmin=d.getMinutes();
        if (nmin<=9) { 
            nmin = "0" + nmin 
        }
        return nhour+":"+nmin+"";
    }
    
    setInterval(GetTime, 1000); // run GetTime every 1000ms

<span id="clock"></span>

JavaScript 时钟在移动设备上不显示当前时间

JavaScript clock not showing current time on mobile devices

javascript

mobile

timer

clock