DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript設計簡單的秒表計時器
javascript設計簡單的秒表計時器
編輯:關於JavaScript     

本文實例講述了javascript設計簡單的秒表計時器的實現代碼。分享給大家供大家參考。具體如下:
運行效果截圖如下:

具體代碼如下:

<html> 
<head> 
<title> New Document </title> 
</head> 
<body> 
 <form action="somepage.asp"> 
  <input type="text" value="0" name="txt1"/> 
  <input type="button" value="開始" name="btnStart"/> 
  <input type="button" value="重置" name="btnReset"/> 
 </form> 
</body> 
</html> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
//獲取表單中的表單域 
var txt=document.forms[0].elements["txt1"]; 
var btnStart=document.forms[0].elements["btnStart"]; 
var btnReset=document.forms[0].elements["btnReset"] 
//定義定時器的id 
var id; 
//每10毫秒該值增加1 
var seed=0; 
btnStart.onclick=function(){ 
  //根據按鈕文本來判斷當前操作 
  if(this.value=="開始"){ 
    //使按鈕文本變為停止 
    this.value="停止"; 
    //使重置按鈕不可用 
    btnReset.disabled=true; 
    //設置定時器,每0.01s跳一次 
    id=window.setInterval(tip,10); 
  }else{ 
    //使按鈕文本變為開始 
    this.value="開始"; 
    //使重置按鈕可用 
    btnReset.disabled=false; 
    //取消定時 
    window.clearInterval(id); 
  } 
} 
//重置按鈕 
btnReset.onclick=function(){ 
  seed=0; 
} 
//讓秒表跳一格 
function tip(){ 
  seed++; 
  txt.value=seed/100; 
} 
//--> 
</script>

希望本文所述對大家學習javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved