JavaScript自動更新時間效果詳解

admin發表於2018-09-21

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

程式碼如下:

[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()一章節。

相關文章