JavaScript實時變化時間日期

admin發表於2018-07-16
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 printTime(){
  var time=new Date();
  var year=time.getFullYear();
  var month=(time.getMonth())+1;
  var daynum=time.getDay();
  var hour=time.getHours();
  var min = time.getMinutes();
  var sec=time.getSeconds();
  var da=time.getDate();
  var daystr;
  switch(daynum){
    case 0: daystr="星期日";
      break;
    case 1: daystr="星期一";
      break;
    case 2: daystr="星期二";
      break;
    case 3: daystr="星期三";
      break;
    case 4: daystr="星期四";
      break;
    case 5: daystr="星期五";
      break;
    case 6: daystr="星期六";
      break;
    default: daystr="";
  }
  var str=year+"年"+month+"月"+da+"日  "+daystr+" "+hour+": "+min+": "+sec;
  timer.innerHTML=str;
  setTimeout(printTime,1000);
}
window.onload=function(){printTime();}
</script>
<body>
<div id="timer"></div>
</body>
</html>

能夠實時的獲取當地系統的時間日期，下面介紹一下它的時間過程。

一.實現原理：

原理大致是這樣，建立一個函式，能夠獲取當前的系統時間，為了能夠有實時變化效果，要每秒呼叫一次此函式，所以在函式的尾部使用setTimeout定時器函式遞迴呼叫函式本身。

二.程式碼註釋：

（1）.時間日期相關方法參閱JavaScript Date物件一章節。

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

（3）.setTimeout方法可以參閱window setTimeout()一章節。

相關文章