JavaScript年月日日期顯示程式碼

antzone發表於2018-07-04
JavaScript

很多網頁在頂端或者其他位置會顯示時間日期，並且還可以自動變動。

下面就通過程式碼例項簡單介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
var week; 
var weeks;
var date; 
var time;
var hour;
var minute;
var second;
function getTimeNow() { 
  time=new Date(); 
  hour=time.getHours(); 
  minute=time.getMinutes(); 
  second=time.getSeconds(); 
  weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  week=weeks[time.getDay()];
  date=(time.getFullYear())+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "; 
  nowTime.innerHTML ="當前時間:"+date+week+" "+hour+":"+minute+":"+second;
} 
window.onload=function(){
  var nowTime=document.getElementById("nowTime"); 
  setInterval("getTimeNow()",1000); 
}
</script>
</head>
<body> 
<div id="nowTime"></div> 
</body>
</html>

程式碼實現了我們的功能，能夠實時的顯示當前系統的日期和時間。

一.實現原理:

原理非常簡單，首先建立一個函式getTimeNow，當執行此函式時，將當前的年月日時間寫入div，獲取年月日的方式都是採用的Date物件的方法。然後再使用setInterval方法每隔一秒執行一次getTimeNow函式，於是就可以事實的在div中顯示當前的日期時間。

二.程式碼註釋:

（1）.var week，宣告變數，用語存放周，下面的幾個變數宣告原理也是如此。

（2）.function getTimeNow(){}，此函式可以獲取當前系統的日期時間，並寫入div。

（3）.time=new Date();,建立當前時間物件。

（4）.hour=time.getHours()，獲取當前時間的小時。

（5）.minute=time.getMinutes()，獲取當前時間的分鐘。

（6）.second=time.getSeconds()，獲取當前時間的秒。

（7）.weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]，建立一個數字，陣列中的元素是星期。

（8）.week=weeks[time.getDay()]，getDay()函式可以翻譯0-6的值，利用這個特點，可以取得當前是星期幾。

（9）.date=(time.getFullYear())+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "，字串連線，將當前的年月日連線起來。

（10）.nowTime.innerHTML ="當前時間:"+date+week+" "+hour+":"+minute+":"+second，將年月日時間和日期寫入div。

三.相關閱讀:

（1）.Date物件參閱JavaScript Date 物件一章節。

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

相關文章