JavaScript計時器效果

antzone發表於2017-03-15
JavaScript

計時器在很多場合都有應用，例如體育場上教練手中的計時器，下面介紹一下如何在網頁中是實現計時器效果，不過這裡沒有教練手中的精確，精確度只能到秒。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />  
<script type="text/javascript"> 
var c=0; 
var t; 
function timedCount() 
{ 
  document.getElementById('txt').value=c 
  c=c+1 
  t=setTimeout("timedCount()",1000) 
} 
function stopCount() 
{ 
  clearTimeout(t) 
} 
window.onload=function()
{
  var ostart=document.getElementById("start");
  var ostop=document.getElementById("stop");
   
  ostart.onclick=function(){timedCount()}
  ostop.onclick=function(){stopCount()}
}
</script> 
</head> 
<body> 
<form> 
<input type="button" value="開始計時" id="start"/> 
<input type="text" id="txt"> 
<input type="button" value="停止計時" id="stop"> 
</form> 
</body> 
</html>

當點選開始按鈕的時候，能夠執行timedCount函式，每執行一次為文字框中的值加1，並且可以使用setTimeout遞迴呼叫timedCount，這樣就實現了文字框的值自增效果，點選停止setTimeout函式的執行。

相關閱讀:

（1）.setTimeout()函式參閱setTimeout()一章節。 

（2）.clearTimeout()函式參閱clearTimeout()一章節。 

（3）.onclick事件參閱javascript click 事件一章節。 

相關文章