JavaScript自動更新時間效果詳解

admin發表於2018-09-21
JavaScript

很多網站的頁面某個地方，會有一個能夠自動更新的時間，這也算是比較人性化的舉措，不過有沒有對使用者影響不大，因為電腦本身就會帶有時間，並且這個時間也基本是讀取的本機時間。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#time{
  width:240px;
  height:50px;
  margin:0px auto;
}
</style>
<script type="text/javascript"> 
function getDateDemo(){  
  var myDate=new Date(); 
  var year=myDate.getFullYear(); 
  var month=myDate.getMonth() + 1; 
  var date=myDate.getDate(); 
  var hours=myDate.getHours(); 
  var minutes=myDate.getMinutes(); 
  var seconds=myDate.getSeconds(); 
 
  //月份的顯示為兩位數字如09月 
  if(month < 10 ){ 
    month = "0" + month; 
  } 
  if(date < 10 ){ 
    date = "0" + date; 
  } 
 
  var dateTime=year+"年"+month+"月"+date+"日"+hours+"時"+minutes+"分"+seconds+"秒"; 
 
  var divNode = document.getElementById("time"); 
  divNode.innerHTML = dateTime; 
} 
window.setInterval(getDateDemo,1000);
</script> 
</head> 
<body> 
<div id="time"></div> 
</body> 
</html>

以上程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.實現原理:

原理非常的簡單，因為要實時顯示時間，所以首先構造一個函式，此函式可以獲取當前的事件，然後使用定時器函式每隔一秒執行一下此函式，於是在視覺上就會產生實時變化的效果，具體就不多說了，可以參閱程式碼註釋。

二.程式碼註釋:

（1）.function getDateDemo(){}，顯示當前的時間日期，定時器函式每隔一秒呼叫一次就實現預期效果。

（2）.var myDate=new Date()，建立當前時間物件。

（3）.var year=myDate.getFullYear()，獲取當前年份。

（4）.var month=myDate.getMonth() + 1，獲取當前月份，getMonth()獲取的值是從0開始的所以要加1。

（5）.var date=myDate.getDate()，獲取當前的天。

（6）.var hours=myDate.getHours()，獲取當前的小時。

（7）.var minutes=myDate.getMinutes()，獲取當前的分鐘。

（8）.var seconds=myDate.getSeconds()，獲取當前的秒。

（9）.if(month < 10 ){ month = "0" + month;}，如果月份小於10，前面加0，生成"05"這樣的形式。

（11）.var dateTime=year+"年"+month+"月"+date+"日"+hours+"時"+minutes+"分"+seconds+"秒"，將時間日期連線起來。

（12）.var divNode = document.getElementById("time")，獲取div物件。

（13）.divNode.innerHTML = dateTime，將時間字串作為div的內容。

（14）.window.setInterval(getDateDemo,1000)，每隔一秒執行一次函式。

三.相關閱讀:

（1）.getFullYear方法參閱javascript getFullYear()一章節。

（2）. getMonth方法參閱javascript getMonth()一章節。

（3）.getDate方法參閱javascript getDate()一章節。 

（4）.getHours方法參閱JavaScript getHours()一章節。 

（5）.getMinutes方法參閱JavaScript getMinutes()一章節。

（6）.getSeconds方法參閱javascript getSeconds()一章節。

（7）. setInterval方法參閱setInterval()一章節。

相關文章