JavaScript 秒錶效果詳解

admin發表於2018-12-20
JavaScript

分享一段程式碼，它利用JavaScript實現秒錶效果，也就是每隔一秒數字加1。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<title>javascript實現的秒錶效果-螞蟻部落</title> 
<style type="text/css"> 
#container{ 
  margin:0 auto; 
  margin-top:10%; 
  width:200px; 
} 
#timer{ 
  border:red double 1px; 
  width:180px; 
  height:76px; 
  line-height:76px; 
  font-size:32pt; 
  color:green; 
} 
input{ 
  width:87px; 
} 
</style> 
<script type="text/javascript">
window.onload=function(){
  var ctrl=document.getElementById("ctrl"); 
  var myreset=document.getElementById("myreset");
  var timer=document.getElementById("timer");
  init(timer,ctrl);
  myreset.setAttribute("onclick", "init(timer,ctrl)");  
}
var hour, minute, second;
var t;
var init=function(theTimer,TheCtrl){ 
  theTimer.innerHTML="00:00:00"; 
  hour=minute=second=0; 
  TheCtrl.setAttribute("value", "開始");
  TheCtrl.setAttribute("onclick", "startit()"); 
  clearTimeout(t); 
}  
function startit(){ 
  second++; 
  if(second>=60){ 
    second = 0; 
    minute++; 
  } 
  if(minute>=60){ 
    minute = 0; 
    hour++; 
  } 
  timer.innerHTML=j(hour)+":"+j(minute)+":"+j(second); 
  ctrl.setAttribute("value", "暫停/停止"); 
  ctrl.setAttribute("onclick", "pause()");
  t=setTimeout("startit()", 1000);  
} 
var j = function(arg){ 
  return arg>=10 ? arg : "0" + arg; 
} 
var pause = function(){ 
  clearTimeout(t); 
  ctrl.setAttribute("onclick", "startit()"); 
  ctrl.setAttribute("value", "繼續"); 
} 
</script>
</head> 
<body> 
<div id="container"> 
   <div id="timer"></div> 
   <input type="button" id="ctrl" /> 
   <input type="reset" id="myreset"/>
</div> 
</body> 
</html>

程式碼實現了秒錶效果，下面就介紹一下此特效的實現過程：

一.實現原理:

原理比較簡單，使用setTimeout()函式不斷遞迴呼叫startith函式，startith函式每執行一次增加一秒，然後判斷秒、分是否大於60，如果大於，則按照時間運演算法則進行進位或者清零，再將當前時間值寫入timer元素中，於是就實現了秒錶效果，關於開始，暫停就不多介紹了，可以看程式碼註釋。

二.程式碼註釋:

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

（2）.var ctrl=document.getElementById("ctrl")，獲取id屬性值為ctrl的物件元素。

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

（4）.var timer=document.getElementById("timer")，獲取id屬性值為timer的物件元素。

（5）.init(timer,ctrl)，呼叫函式並傳遞引數執行。

（6）.myreset.setAttribute("onclick", "init(timer,ctrl)")，為重置按鈕註冊事件處理函式。

（7）.var hour, minute, second，宣告三個變數，分別用來表示時間的小時、分鐘和秒。

（8）.var t，宣告一個變數用來儲存setTimeout()函式的返回值。

（9）.var init=function(theTimer,TheCtrl){}，宣告一個函式用來初始化秒錶效果，第一個引數是顯示秒錶效果的元素物件，第二個引數是開始按鈕物件。

（10）.theTimer.innerHTML="00:00:00"，將theTimer元素的內容設定為="00:00:00"。

（11）.hour=minute=second=0，將三個變數的值分別設定為0。

（12）.TheCtrl.setAttribute("value", "開始")，將開始按鈕的value屬性值設定為“開始”。

（13）.TheCtrl.setAttribute("onclick", "startit()")，為開始按鈕註冊onclick事件處理函式。

（14）.clearTimeout(t)，停止setTimeout()函式的執行。

（15）.function startit(){}，宣告一個函式。

（16）.second++，秒加1.

（17）.if(second>=60)，如果秒數大於等於60，則將second清零，並將minute加1。

（18）.timer.innerHTML=j(hour)+":"+j(minute)+":"+j(second)，將timer的內容設定為當前的秒錶值。

（19）.ctrl.setAttribute("value", "暫停/停止")，將開始按鈕的value屬性值設定為暫停/停止"。

（20）.ctrl.setAttribute("onclick", "pause()")，為開始按鈕註冊onclick事件處理函式。

（21）.t=setTimeout("startit()",1000)，一秒後，再次呼叫startit()函式。

（22）.var j=function(arg){return arg>=10 ? arg : "0" + arg;}，用於判斷當前時間各單位的數值是否大於等於10，如果大於在使用原數值，如果不小於10，則在前面新增0，這是使用了三元運算子。

（23）.var pause = function(){}，宣告一個函式用於暫停秒錶。

（24）.clearTimeout(t)，停止setTimeout()函式的執行。

（25）.ctrl.setAttribute("onclick", "startit()")，為開始按鈕註冊onclick事件處理函式。

（26）.ctrl.setAttribute("value", "繼續")，將開始按鈕的value屬性值設定為“繼續”。

三.相關閱讀:

（1）.setAttribute()參閱setAttribute()用法一章節。

（2）.setTimeout()參閱setTimeout()方法一章節。

（3）.關於三元運算子參閱三元運算子用法一章節。

相關文章