JavaScript 实现简易计时器秒表功能
作者:青柠时间:2026-10-23 13:48:21浏览:225
本文介绍如何使用 JavaScript 实现一个简易的计时器秒表功能。通过 HTML 构建界面,利用 setInterval 和 clearInterval 控制计时逻辑,实现开始、暂停和重置功能。
JavaScript 实现简易计时器秒表功能
本文分享了一段使用 JavaScript 实现计时器秒表功能的代码示例,供读者参考学习。
HTML 部分
<input type="text" id="timetext" value="00:00:00" readonly>
<button type="button" onclick="start()">开始</button>
<button type="button" onclick="stop()">暂停</button>
<button type="button" onclick="Reset()">重置</button>
Script 部分
<script>
var hour,minute,second;//时 分 秒
hour=minute=second=0;//初始化
var millisecond=0;//毫秒
var int;
function Reset()//重置
{
window.clearInterval(int);
millisecond=hour=minute=second=0;
document.getElementById('timetext').value='00:00:00:000';
}
function start()//开始
{
int=setInterval(timer,50);
}
function timer()//计时
{
millisecond=millisecond+50;
if(millisecond>=1000)
{
millisecond=0;
second=second+1;
}
if(second>=60)
{
second=0;
minute=minute+1;
}
if(minute>=60)
{
minute=0;
hour=hour+1;
}
document.getElementById('timetext').value=toDub(hour)+':'+toDub(minute)+':'+toDub(second);
}
function stop()//暂停
{
window.clearInterval(int);
}
//补零
function toDub(n){
return n<10?"0"+n:""+n;
}
</script>
运行效果如图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
