js年月日小時分鐘秒動態時鐘效果

admin發表於2017-04-12
JS

本章節分享一段程式碼例項，它實現了時間日期效果，能夠精確掉秒，並且可以自動變化。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  var str = '';
  var oTime = document.getElementById('time');
 
  function fnTime() {
    var time = new Date();
    var day = time.getDay();
    if (day == 1) {
      day = '星期一';
    } else if (day == 2) {
      day = '星期二';
    } else if (day == 3) {
      day = '星期三';
    } else if (day == 4) {
      day = '星期四';
    } else if (day == 5) {
      day = '星期五';
    } else if (day == 6) {
      day = '星期六';
    } else {
      day = '星期日'
    }
 
    str = time.getFullYear() + '年'
          + time.getMonth() + 1 + '月'
          + time.getDate() + '日 '
          + day + ' '
          + toTwo(time.getHours())
          + ':'
          + toTwo(time.getMinutes()) + ':'
          + toTwo(time.getSeconds());
    oTime.innerHTML = str;
  }
 
  fnTime();
  setInterval(function () {
    fnTime();
  }, 1000);
  function toTwo(n) {
    return n < 10 ? '0' + n : '' + n;
  }
}
</script>
</head>
<body>
<div id="time"></div>
</body>
</html>

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

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var str = ''，宣告一個變數並賦值為空。

（3）.var oTime = document.getElementById('time')，獲取id屬性值為time的元素物件。

（4）.function fnTime() {},此方法實現了當前的時間日期，那麼不斷呼叫的話就實現了時間日期自動變動效果。（5）.var time = new Date()，建立一個時間日期物件。

（6）.var day = time.getDay()，返回一個0-6之間的數字，和星期相對應。

（7）.if (day == 1) {

  day = '星期一';

} else if (day == 2) {

  day = '星期二';

} else if (day == 3) {

  day = '星期三';

} else if (day == 4) {

  day = '星期四';

} else if (day == 5) {

  day = '星期五';

} else if (day == 6) {

  day = '星期六';

} else {

  day = '星期日'

}將對應的數字轉換為漢字形式的星期。

（8）.str = time.getFullYear() + '年'

          + time.getMonth() + 1 + '月'

          + time.getDate() + '日 '

          + day + ' '

          + toTwo(time.getHours())

          + ':'

          + toTwo(time.getMinutes()) + ':'

          + toTwo(time.getSeconds());

將時間日期連線成字串。

（9）.oTime.innerHTML = str，將字串寫入指定元素。

（10）.fnTime()，執行此函式，這麼做的目的是為了立馬顯示實現，否則會有一秒的延遲。

（11）.setInterval(function () {

  fnTime();

}, 1000)，每隔一秒呼叫一次fnTime()函式，這樣就是先時間日期自動變動效果。

（12）.function toTwo(n) {

  return n < 10 ? '0' + n : '' + n;

}，如果日期數字是個位數，前面就加0。

二.相關閱讀:

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

（2）.innerHTML可以參閱innerHTML一章節。

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

相關文章