如何自動刷新頁面以顯示秒數變化？

-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

如何自動刷新頁面以顯示秒數變化？

回答

相關問題