如何自动刷新页面以显示秒数变化？

-1

<html> 
<script language="javascript"> 
today = new Date(); 
document.write("<BR>The time now is: ", today.getHours(),":",today.getMinutes(),":",today.getSeconds()); 
document.write("<BR>The date is: ", today.getDate(),"/",today.getMonth()+1,"/",today.getYear()); 
</script> 
</html>

我想自动刷新页面以显示秒数的变化。怎么做？请帮帮我。如何自动刷新页面以显示秒数变化？

来源

2013-04-30 arunpandiyarajhen

首先，你可能不应该使用document.write（）。这通常被认为是不好的做法。您最好在HTML中使用容器元素（例如<div>）。然后，您可以设置此<div>的innerHTML。

接下来，您不必每隔一秒刷新页面。使用setInterval()函数。它接受一个函数和一个时间间隔，让你可以在给定函数再次运行的时间之后进行设置。

在您的HTML中，您只需要一个<div>元素。

<div id="time"></div>

在JavaScript中，明确写入当前日期到容器元素的功能和使用的setInterval调用它的每一秒（1000毫秒）。

var time = document.getElementById('time'); 

function writeDate() { 
    var today = new Date(); 
    time.innerHTML = "The time now is: " + today.getHours() +":" + today.getMinutes() + ":" + today.getSeconds(); 
    time.innerHTML += "<br>The date is: " + today.getDate() + "/" + (today.getMonth() + 1) + "/" + today.getFullYear(); 
} 

setInterval(writeDate, 1000);

你可以看到它在这个jSFiddle行动。

来源

2013-04-30 06:42:05 Sacha

呵呵。我们几乎得到了相同的答案...... – Kiruse 2013-04-30 06:43:46

@ Derija93很明显，是的。但是，当我发布我的内容时，你的内容并没有达到现在的细节水平。 – Sacha 2013-04-30 06:46:01

那是一个错误。我在编辑代码时设法打开了Tab + Enter，并发布了答案。这真的很尴尬...... – Kiruse 2013-05-02 21:10:33

这里自动刷新不是一个好主意。有更好的方法。但是，如果你坚持使用：

window.location.reload();

一个更好的方法是将包装在一个函数并调用window.setInterval或window.setTimeout就可以了。请注意，setInterval注册一个循环定时器，而setTimeout只会调用一次注册功能。改变你的代码是这样的：

<head> 
<script language="text/javascript"> 
function doIt() { 
    var today = new Date(); 
    document.getElementById("output").innerHTML = "The time now is: " + 
     today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds() + 
     "<br />The date is: " + today.getDate() + "/" + (today.getMonth() + 1) + 
     "/" + today.getYear(); 
} 
window.setInterval(doIt, 1000); 
// Alternatively you can use: 
//window.setInterval("doIt()", 1000); // This is what you usually learn first... 
</script> 
</head> 
<body> 
    <div id="output"></div> 
</body>

来源

2013-04-30 06:38:47 Kiruse

试试这个（请注意，你应该使用的getFullYear代替getYear）：

<html> 
    <head> 
     <title>Date Time</title> 
    </head> 
    <body> 
     <div id = 'time'><div> 
     <script language="javascript"> 
      function getCurrentTime() 
      { 
       var today = new Date(); 
       var hours = today.getHours(); 
       if (hours <= 9){ 
        hours = '0' + hours; 
       } 
       var minutes = today.getMinutes(); 
       if (minutes <= 9){ 
        minutes = '0' + minutes; 
       } 
       var seconds = today.getSeconds(); 
       if (seconds <= 9){ 
        seconds = '0' + seconds; 
       } 
       return hours + ":" + minutes + ":" + seconds; 
      } 

      function getCurrentDate() 
      { 
       var today = new Date(); 
       var days = today.getDate(); 
       if (days <= 9){ 
        days = '0' + days; 
       } 
       var months = today.getMonth() + 1; 
       if (months <= 9){ 
        months = '0' + months; 
       } 
       var years = today.getFullYear(); 
       if (years <= 9){ 
        years = '0' + years; 
       } 
       return days + "/" + months + "/" + years; 
      } 

      function updateDateTime() 
      { 
       document.getElementById('time').innerHTML = '<br />The time now is: ' + getCurrentTime() + 
                  '<br />The date is: ' + getCurrentDate(); 
       setTimeout(updateDateTime, 1000); 
      } 

      updateDateTime(); 
     </script> 
    </body> 
</html>

来源

2013-04-30 06:47:19

出于好奇，为什么不使用'setInterval'而不是一遍又一遍调用'setTimeout'？ – Sacha 2013-04-30 06:51:51

使用setTimeout，您将永远不会同时运行两个实例，以防其中一个实例运行时间过长。 – 2013-04-30 07:00:08

如何自动刷新页面以显示秒数变化？

回答

相关问题