JavaScript 自動重新整理的時間日期

antzone發表於2017-03-20
JavaScript

可以自動重新整理的時間日期效果在很多網頁都在使用，能夠讓頁面更加動感，也更加人性化。

下面通過程式碼例項介紹一下如何實現此效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
function getTime(){ 
  var odate=new Date(); 
  var date=odate.toLocaleDateString(); 
  var hours=odate.getHours(); 
  var minutes=odate.getMinutes(); 
  var seconds=odate.getSeconds(); 
  $("#showDate").html(date+" "+(hours>9?hours:"0"+hours)+":"
  +(minutes>9?minutes:"0"+minutes)+":"
  +(seconds>9?seconds:"0"+seconds));
} 
$(function(){ 
  setInterval("getTime();",1000);
}) 
</script> 
</head> 
<body> 
<div id="showDate"></div>
</body> 
</html>

上面的程式碼實現了實現時間日期的自動重新整理效果，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.function getTime(){}，此函式可以獲取當前的時間日期。

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

（3）.var date=odate.toLocaleDateString()，可以獲取本地年月日。

（4）.var hours=odate.getHours()，獲取小時。

（5）.var minutes=odate.getMinutes()，獲取分鐘。

（6）.var seconds=odate.getSeconds()，獲取秒。

（7）.$("#showDate").html(date+" "+(hours>9?hours:"0"+hours)+":"+(minutes>9?minutes:"0"+minutes)+":"+(seconds>9?seconds:"0"+seconds))，將當前的時間日期寫入指定的元素，當然這裡是div，這是使用三元運算子是為了實現當小時、分鐘和秒為個位數時，前面加0。

（9）.$(function(){setInterval("getTime();",1000);}) ，每秒執行一次指定的函式。

二.相關閱讀：

（1）.關於時間物件參閱JavaScript Date一章節。 

（2）.三元運算子參閱JavaScript 三元運算子一章節。 

（3）.setInterval()參閱JavaScript setInterval()一章節。 

相關文章