JavaScript实现简易秒表计时器

作者:小括号

时间:2026-10-29

浏览:266

本文介绍如何使用JavaScript编写一个简单的秒表计时器。通过HTML表单获取输入,利用setInterval实现定时累加,并配合clearInterval和按钮事件控制开始、停止与重置功能,适合初学者学习JS基础交互逻辑。

文章目录

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程序设计中的基础应用。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章