欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

javascript设计简单的秒表计时器

时间:2022-07-22 10:54:53|栏目: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程序设计有所帮助。

上一篇:一起来学习TypeScript的类型

栏    目:JavaScript代码

下一篇:JavaScript实现简单的星星评分效果

本文标题:javascript设计简单的秒表计时器

本文地址:http://www.codeinn.net/misctech/208566.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有