Question

我正在构建一个显示当前时间的应用，而无需刷新。我打电话给下面的时间，但是当我显示它时，我必须刷新页面来更新时间。如何不断更新时间？

function GetTime(){
var today = new Date();
var hour = today.getHours();
var minute = today.getMinutes();

        if (hour>=12){                  //Adding endings
                suffix = "P.M.";}
        else{
                suffix = "A.M.";}


minute = addZero(minute);       //Call addZero function
hour = removeMilitary(hour);    //Call removeMilitary Function

var fullTime = hour + ":" + minute + " " + suffix;  //Combine hour minute and the suffix



        function addZero(number){
                        if (number<10){
                            number = "0" + number;
                        }
                        return number;
        }

        function removeMilitary(hour){ //This function can be removed if desired by user.

            if (hour > 0 && hour <= 12) {
                hour = "" + hour;
            } else if (hour > 12) {
                hour = "" + (hour - 12);
            } else if (hour == 0) {
                hour= "12";
            }
            return hour;
        }
return fullTime;

}

Answer 1

Javascript有setInterval方法。

您可以通过每1000毫秒运行一次程序来获取每秒的时间：

setInterval(GetTime, 1000);
//if you incorporate updating the html 
//within the getTime function

或

setInterval(function(){
    document.getElementById("ID_of_the_time_element").innerHTML= getTime();
    //do something else
}, 1000}

为什么在1000毫秒时setInterval不是非常准确

问题在于，除非您在第二个时间内准确地启动设定间隔，否则您的程序将不会在第二个时间内完全改变第二个。例如，我建议您通过将间隔调整为每100毫秒来使其更准确。然后它会每100ms更新一次，这意味着你的时钟最多只有十分之一秒。

更好的解决方案

每100毫秒设置一个间隔是可以的，但是如果你想要更高的准确度，将它设置为10毫秒不一定是最好的选择，因为每10毫秒重复一次任务对计算机来说是一个相当大的负担。您还可以使用查找ms的数量直到下一秒，然后使用setTimeout方法等待下一秒到达并开始设置超时。你仍然会有一些计算延迟（从它到达下一秒之前获得毫秒数并且它开始setTimeout之间的时间量），但这可能远远少于100毫秒。

Answer 2

我假设你将使用setInterval()函数。只需将其添加到按钮onclick;

setInterval(function(){Document.getElementById("div").innerHTML = getTime},1000);

Answer 3

setInterval（GetTime，1000）将每隔一秒（1000毫秒）调用您的函数来获取时间。您不会展示如何将时间放在页面上，因此您也需要将其合并到页面上。

Answer 4

更新我忘记了setInterval，但其他人已经指出了它，所以混合两个答案就完成了！

查看getElementById和innerHTML。

类似功能结尾处的以下代码段（而不是return fulltime）应该有效：

...
var myElement = documentGetElementById('mydiv');
myElement.innerHTML = fulltime;
...

当然，您需要使用<div id="mydiv"></div>或您选择的任何内容定义一些HTML元素。

使用Javascript

4 个答案: