js能夠自動變動的時間日期效果程式碼例項

antzone發表於2017-03-29
JS

本章節通過程式碼例項介紹一下如何實現自動走動的時間效果，也就是能夠讀秒的時間日期。

可以是網頁能夠增加動態的感覺，也比較美觀，下面是實現的程式碼，並且有詳細的註釋，有些程式碼最好不但會用，而且能夠明白其中實現的原理，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function getCurrentDate(){
  var timeStr = '';
  var curDate = new Date();
  var curMonth = curDate.getMonth()+1;
  var curDay = curDate.getDate();
  var curWeekDay = curDate.getDay();
  var curHour = curDate.getHours();
  var curMinute = curDate.getMinutes();
  var curSec =curDate.getSeconds();
  timeStr = curMonth+'月'+curDay+'日 周';
  switch(curWeekDay){
    case 0:timeStr += '日';break;
    case 1:timeStr += '一';break;
    case 2:timeStr += '二';break;
    case 3:timeStr += '三';break;
    case 4:timeStr += '四';break;
    case 5:timeStr += '五';break;
    case 6:timeStr += '六';break;
  }
  if(curHour < 10){
    if(curMinute < 10){
      if(curSec < 10){
        timeStr += ' 0'+curHour+':0'+curMinute+':0'+curSec;
      }
      else{
        timeStr += ' 0'+curHour+':0'+curMinute+':'+curSec;
      }
    }
    else{
      if(curSec < 10){
        timeStr += ' 0'+curHour+':'+curMinute+':0'+curSec;
      }
      else{
        timeStr += ' 0'+curHour+':'+curMinute+':'+curSec;
      }
    }
  }
  else{
    if(curMinute < 10){
      if(curSec < 10){
        timeStr += ' '+curHour+':0'+curMinute+':0'+curSec;
      }
      else{
        timeStr += ' '+curHour+':0'+curMinute+':'+curSec;
      }
    }
    else{
      if(curSec < 10){
        timeStr += ' '+curHour+':'+curMinute+':0'+curSec;
      }
      else{
        timeStr += ' '+curHour+':'+curMinute+':'+curSec;
      }
    }
  }
  $("#time").text(timeStr);
  setTimeout(getCurrentDate,1000);
}
$(document).ready(function(){
  getCurrentDate()
})
</script>
</head>
<body>
<div id="time"></div>
</body>
</html>

上面的程式碼實現了我們的要求，雖然沒有年份的顯示，但這不是大問題，只要稍作修改就可以了，最重要的是弄懂程式碼實現的原理，下面就詳細介紹一下它的實現過程。

一.程式碼註釋:1.function getCurrentDate(){}，此函式實現了實時獲取的功能。

2.var timeStr = ''，宣告一個變數，並賦值為空字串，用來儲存最終的時間日期字串。

3.var curDate = new Date()，建立一個時間物件。

4.var curMonth = curDate.getMonth()+1，獲取當前月份，之所以加1是因為一月份此函式的返回值是0，以此類推。

5.var curDay = curDate.getDate()，獲取當前日期的天。

6.var curWeekDay = curDate.getDay()，獲取當前星期。

7.var curHour = curDate.getHours()，獲取當前的小時。

8.var curMinute = curDate.getMinutes()，獲取當前的分鐘。

9.var curSec =curDate.getSeconds()，獲取當前的秒。

10.timeStr = curMonth+'月'+curDay+'日 周'，進行時間日期字串連線。

11.switch(curWeekDay){

  case 0:timeStr += '日';break;

  case 1:timeStr += '一';break;

  case 2:timeStr += '二';break;

  case 3:timeStr += '三';break;

  case 4:timeStr += '四';break;

  case 5:timeStr += '五';break;

  case 6:timeStr += '六';break;

}，通過switch語句進行星期的格式轉換。

12.下面一大坨if語句就是現實在個位的數字前面加"0"。

13.最後是進行遞迴呼叫，這樣就實現了實時變化效果。

二.相關閱讀:

1.時間日期物件可以參閱JavaScript Date物件一章節。

2.switch語句可以參閱javascript switch一章節。

3.setTimeout()函式可以參閱setTimeout()一章節。

相關文章