JavaScript 秒錶效果詳解

admin發表於2018-12-20

分享一段程式碼,它利用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).關於三元運算子參閱三元運算子用法一章節。

相關文章