Make a simple stopwatch with javascript-JS Tutorial-php.cn

Make a simple stopwatch with javascript

怪我咯

Release： 2017-06-29 10:48:45

Original

1808 people have browsed it

This article mainly introduces javascript to design a simple stopwatch timer. The stopwatch will include two buttons and a text box for displaying the time. When start is clicked The timing starts when the button is pressed. The minimum unit is 0.01 seconds. Clicking the button again will stop the timing. The text box displays the elapsed time. Friends who need it can refer to the following.

This article describes an example of designing a simple stopwatch timing using JavaScript. The implementation code of the device. Share it with everyone for your reference. The details are as follows:
The screenshot of the running effect is as follows:

The specific code is as follows:

<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>

Copy after login

The above is the detailed content of Make a simple stopwatch with javascript. For more information, please follow other related articles on the PHP Chinese website!