本文详细介绍如何使用JavaScript开发一款具备开始、暂停和复位功能的秒表计时器。通过解析页面结构与核心逻辑，展示如何利用setInterval实现时分秒及毫秒的精准计时，并配合CSS打造美观界面。文中提供完整可运行的HTML、CSS及JS代码，帮助开发者快速掌握前端定时器与DOM元素交互的实际应用。
JavaScript秒表计时器实现概述
本文分享了一个使用JavaScript编写的秒表计时器实例，供读者参考学习。
实现效果如图所示：
支持显示“分+秒+毫秒”格式。
也可扩展为“时+分+秒+毫秒”格式。
功能需求与页面结构分析
需求分析如下：
1、完整展示秒表页面布局；
2、点击“开始”按钮后启动计时，按钮文字切换为“暂停”；再次点击“暂停”按钮时，停止计时并将按钮文字恢复为“开始”；
3、点击“复位”按钮后，将计时显示清零，并将按钮状态重置为“开始”。
页面结构设计：
<div id="miaoBiao">
<div id="dingShi">
<p>
<!-- <span id="houer">00</span> : -->
<span id="minute">00</span> :
<span id="second">00</span> 
<span id="msecond">00</span>
</p>
<!-- 显示：时：分：秒 跑秒 ，“时”解除注释可使用 -->
<button id="btn1">开始</button>
<button id="reset">复位</button>
</div>
</div>页面主体由四个<span>元素组成，分别用于显示秒表的时间数据；此外包含两个按钮：“开始/暂停”切换按钮和“复位”按钮。
核心函数逻辑解析
辅助函数说明：
id节点调用函数
function jieDian(id){
return document.getElementById(id);
}通过封装此函数可简化页面代码调用过程。
开始运行函数
function startBtn(){
timer1=setInterval(function(){
i++
jieDian("msecond").innerHTML =doubleLing(i%100);
jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ;
jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ;
jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ;
},10)
}
//开始运行函数暂停函数
function pasueBtn(){
clearInterval(timer1)
}赋0函数
function doubleLing(i){
if(i<10){
return "0"+i
}else{
return i
}
}
//赋0函数，当时分秒显示为个位数时，在前面加上“0”完整代码实现
完整代码示例，可直接复制使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#miaoBiao{
width: 550px;height: 450px;background-color: #1d262d;overflow: hidden;
margin: 50px auto;border-radius: 150px;
}
#dingShi{
width: 400px;height: 230px;background-color:#d0eaeb;text-align: center;
padding-top: 0px;margin: 110px auto;border-radius: 40px;
}
#dingShi p{
font-size: 40px;padding-top: 40px;
}
#minute,#second,#houer{
font-size: 56px;
}
#dingShi button{
width: 80px;height: 35px;background-color: orange;margin: 10px auto;
line-height: 35px;font-weight: bold;margin: 0px 20px;
}
</style>
</head>
<body>
<div id="miaoBiao">
<div id="dingShi">
<p>
<span id="houer">00</span> :
<span id="minute">00</span> :
<span id="second">00</span> 
<span id="msecond">00</span>
</p>
<!-- 显示：时：分：秒 跑秒 ，“时”解除注释可使用 -->
<button id="btn1">开始</button>
<button id="reset">复位</button>
</div>
</div>
<script>
var i = 0;
var timer1=null;
var isRunning =false;
//isRunning用于判断当前是否正在运行
function jieDian(id){
return document.getElementById(id);
}
//id节点调用函数
function startBtn(){
timer1=setInterval(function(){
i++
jieDian("msecond").innerHTML =doubleLing(i%100);
jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ;
jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ;
jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ;
},10)
}
//开始运行函数
function pasueBtn(){
clearInterval(timer1)
}
//暂停函数
jieDian("btn1").onclick = function(){
if(!isRunning){
jieDian("btn1").innerHTML = "暂停";
isRunning = true;
startBtn();
}else{
jieDian("btn1").innerHTML="开始";
isRunning = false;
pasueBtn();
}
}
//“开始”与“暂停”点击按钮：
//当按钮显示为“开始”，点击之后，将按钮转为“暂停”按钮，并触发相应条件；
//当按钮显示为“暂停”，点击之后，将按钮转为“开始”按钮，并触发相应条件。
jieDian("reset").onclick =function(){
clearInterval(timer1)
i = 0;
isRunning = false;
jieDian("btn1").innerHTML="开始";
jieDian("msecond").innerHTML ="00";
jieDian("second").innerHTML ="00";
jieDian("minute").innerHTML ="00";
jieDian("houer").innerHTML ="00";
}
//复位按钮，点击之后将秒表各值复位，并“暂停”秒表
function doubleLing(i){
if(i<10){
return "0"+i
}else{
return i
}
}
//赋0函数，当时分秒显示为个位数时，在前面加上“0”
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。