原生JavaScript 自動變化的時間日期程式碼

admin發表於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">
var t = null;
function time(){
  dt = new Date();
  var y=dt.getFullYear();
  var h=dt.getHours();
  var m=dt.getMinutes();
  var s=dt.getSeconds();
  document.getElementById("timeShow").innerHTML="當前時間："+y+"年"+h+"時"+m+"分"+s+"秒";
  t = setTimeout(time,1000);        
} 
window.onload=function(){time()}
</script>
</head>
<body>
<div id="timeShow"></div>
</body>
</html>

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

一.實現原理:

time()函式能夠獲取客戶端當前時間日期，然後在函式最後使用定時器函式遞迴呼叫time()函式，也就是不間斷的獲取客戶端時間日期，於是就實現了時間日期自動更新效果。

二.相關閱讀:

（1）.事件物件可以參閱JavaScript Date一章節。 

（2）.setTimeout()函式可以參閱window.setTimeout()一章節。 

（3）.innerHTML屬性可以參閱js innerHTML一章節。

相關文章