JavaScript動態時間日期

antzone發表於2018-06-29
JavaScript

本章節分享一段程式碼例項，它實現了動態的時間。

當然我們不是說那種華麗的圓形的鐘表的效果，這裡只是獲取系統時間，能夠自動變化的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function Format2Len(i){
  return i < 10 ? "0" + i : i;
}
function RefreshClock(){
  var CurrentTime=new Date();
  var timeStr=CurrentTime.getFullYear() + "-" +
  Format2Len(CurrentTime.getMonth()+1) + "-" +
  Format2Len(CurrentTime.getDate()) + " " +
  Format2Len(CurrentTime.getHours()) + ":" +
  Format2Len(CurrentTime.getMinutes()) + ":" +
  Format2Len(CurrentTime.getSeconds());
  txtClock.value = timeStr;
  setTimeout(RefreshClock,1000);
}
window.onload=function(){
  RefreshClock();
}
</script>
</head>
<body>
 當前時間:<input type="text" id="txtClock" />
</body>
</html>

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

一.程式碼註釋:

（1）.function Format2Len(i){

  return i < 10 ? "0" + i : i;

}，此方法實現了在個位數前面加0的功能，比如5被修改成05。

（2）.function RefreshClock(){},此方法實現了核心功能。

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

（4）.var timeStr=CurrentTime.getFullYear() + "-" +，獲取年份，後面使用橫崗連線。

（5）.setTimeout(RefreshClock,1000)，以遞迴的方式不斷呼叫RefreshClock函式。

二.相關閱讀:

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

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

相關文章