本文详细讲解如何使用JavaScript实现一个简易的计时器功能。通过HTML构建包含输入框和按钮的基础界面，利用setInterval方法每秒更新秒、分、时数据，并处理进位逻辑。同时，通过自定义属性控制暂停与继续状态，实现计时器的完整交互功能。
JavaScript实现简易计时器：HTML结构与核心逻辑解析
计时器是日常生活中常见的功能，广泛应用于健身锻炼、跑步比赛等各类活动中。本文将使用JavaScript来实现一个基础的计时器功能。
计时器的核心在于时间的逻辑处理，例如60秒等于1分钟，60分钟等于1小时。本文仅处理到小时级别，并将计算结果动态显示在输入框中。
接下来，我们将构建计时器的用户界面。
<label>计时:</label>
<input type="text" name="" id="timer"/>
<button onclick="pause(this)" id="pause" state="on">暂停</button>
<button onclick="restart()">重新开始</button>
为标签元素设置ID以便通过JavaScript获取，并添加两个点击事件：分别用于暂停计时器和重新开始计时。
首先实现开始计时的功能。主要利用setInterval方法，每隔1秒执行一次回调函数。根据前文提到的时间换算逻辑（60秒=1分钟，60分钟=1小时），通过条件判断处理进位，最终将计算得到的秒、分、时数值显示在输入框中。
var ele_timer = document.getElementById("timer");
var n_sec = 0; //秒
var n_min = 0; //分
var n_hour = 0; //时
//60秒 === 1分
//60分 === 1小时
function timer() {
return setInterval(function () {
var str_sec = n_sec;
var str_min = n_min;
var str_hour = n_hour;
if ( n_sec < 10) {
str_sec = "0" + n_sec;
}
if ( n_min < 10 ) {
str_min = "0" + n_min;
}
if ( n_hour < 10 ) {
str_hour = "0" + n_hour;
}
var time = str_hour + ":" + str_min + ":" + str_sec;
ele_timer.value = time;
n_sec++;
if (n_sec > 59){
n_sec = 0;
n_min++;
}
if (n_min > 59) {
n_sec = 0;
n_hour++;
}
}, 1000);
}
var n_timer = timer();
使用timer方法包装setInterval是为了便于后续处理暂停和重新开始逻辑。当用户点击暂停按钮时，计时器停止；再次点击该按钮时，计时器继续运行。为此，需要为按钮添加一个状态属性来控制这一行为。
//暂停和继续
function pause(self) {
var state = self.getAttribute("state");
if (state === "on") {
clearInterval(n_timer);
self.textContent = "继续";
self.setAttribute("state", "off");
} else {
n_timer = timer();
self.textContent = "暂停";
self.setAttribute("state", "on");
}
}最后实现重新开始功能，逻辑相对简单。只需将计时器归零，并将暂停按钮恢复至初始状态即可。
function restart() {
clearInterval(n_timer);
n_sec = 0;
n_min = 0;
n_hour = 0;
n_timer = timer();
var ele_pause = document.getElementById("pause");
ele_pause.textContent = "暂停";
ele_pause.setAttribute("state", "on");
}
至此，计时器的功能已全部实现，效果如下所示。
希望本文的介绍能帮助大家更好地理解JavaScript程序设计中的计时器实现方法。