javascript製作簡單的秒錶-js教程-PHP中文網

javascript製作簡單的秒錶

怪我咯

發布： 2017-06-29 10:48:45

原創

1794 人瀏覽過

這篇文章主要介紹了javascript設計簡單的秒錶計時器，該秒錶將包括兩個按鈕和一個用於顯示時間的文字框，當點擊開始按鈕時開始計時，最小單位為0.01秒，此時再次單擊按鈕則停止計時，文本框顯示經過的時間，需要的朋友可以參考下

本文實例講述了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製作簡單的秒錶的詳細內容。更多資訊請關注PHP中文網其他相關文章！