javascript定時器函式開始和結束程式碼例項

antzone發表於2017-04-01
JavaScript定時器函式

本章節分享一段程式碼例項，它演示了setTimeout()定時器函式開始執行和結束效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">
var timer = null;
function begin(){
  var date = new Date();
  var current_time = date.getFullYear() + '-' +  date.getMonth() + '-' + date.getDate() + ' ';
  current_time += date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
  document.getElementById('current_time').value = current_time;
  timer = setTimeout('begin()', 1000);
}
function stop() {
  //清除掉定時器物件
  clearTimeout(timer);  
}
window.onload=function(){
  var start=document.getElementById("start");
  var end=document.getElementById("end");
  start.onclick=function(){begin();}
  end.onclick=function(){stop();}
}
</script>
</head>
<body>
<input type="text"  name="current_time" id="current_time"/>
<input type="button" id="start" value="開始"/>
<input type="button" id="end" value="結束"/>
</body>
</html>

上面的程式碼演示了定時器函式的用法，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var timer = null，宣告一個變數並賦值為null,用來儲存定時器函式的返回值。

（2）.function begin(){}，此函式能夠實現獲取當前時間日期的功能，定時器函式就是對它的呼叫。

（3）.var date = new Date()，建立一個事件日期物件。

（4）.var current_time = date.getFullYear() + '-' +  date.getMonth() + '-' + date.getDate() + ' '，獲取年月日。

（5）.current_time += date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()，連線獲取的小時、分鐘和秒。

（6）.document.getElementById('current_time').value = current_time，給文字框賦值。

（7）.me').value = current_time,使用遞迴的方式不斷呼叫begin函式。

（8）.function stop() {

  //清除掉定時器物件

  clearTimeout(timer);  

}，停止定時器函式的執行。

二.相關閱讀:

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

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

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

相關文章