信鸽网

javascript设计简单的秒表计时器

  作者：bea

本文实例讲述了javascript设计简单的秒表计时器的实现代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0" name

本文实例讲述了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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: