计时器js原理

1.初始化计时器状态:
seconds, minutes, 和 hours 分别存储秒数、分钟数和小时数。
timerInterval 存储计时器的ID，这是由 setInterval 函数返回的。

let seconds = 0;
let minutes = 0;
let hours = 0;
let timerInterval = null;

下面分别是四个按钮的方法：
1.开始:

function startTimer() {
    if (timerInterval === null) {
        timerInterval = setInterval(() => {
            seconds++;
            if (seconds >= 60) {
                seconds = 0;
                minutes++;
                if (minutes >= 60) {
                    minutes = 0;
                    hours++;
                }
            }
            updateTimerDisplay();
        }, 1000);
    } else    
        resetTimer();
        startTimer();
    }
}

• 首先，if函数检查变量 timerInterval 是否为 null，如果 timerInterval 是 null，则意味着计时器尚未启动；否则，计时器已经在运行中。
  满足if条件，执行计时器，则使用 setInterval 方法启动一个新的计时器

秒，分，小时原理翻译：
首先判断秒是否大于等于60，如果大于，秒变为0，分钟加一，再判断分钟，如果分钟大于等于60，分钟变为0，小时加一。
最后调用 updateTimerDisplay() 函数来更新计时器的显示

if函数检查变量 timerInterval 是不为 null，如果计时器已经启动，则首先调用 resetTimer() 函数来停止和重置计时器，然后再次调用 startTimer() 来从零开始重新启动计时器

2. 暂停

function pauseTimer() {
    clearInterval(timerInterval);
    timerInterval = null;
}

clearInterval 是 JavaScript 中的一个全局函数，用于取消之前通过 setInterval 创建的周期性调用。当 clearInterval 被调用时，与 timerInterval 关联的计时器将被停止，它会清除与 timerInterval 关联的定时器，即停止该定时器的执行

这里想再详解一下clearinterval函数
举个例子

const timerId = setInterval(function() {
    console.log("Hello, World!");
}, 1000);

clearInterval(timerId);

这里的 timerId 就是之前 setInterval 返回的那个唯一的标识符。当你调用 clearInterval 并传入 timerId 时，与这个标识符关联的定时器就会被清除，即定时器会停止执行。

3. 重置

function resetTimer() {
    clearInterval(timerInterval);
    timerInterval = null;
    seconds = 0;
    minutes = 0;
    hours = 0;
    document.getElementById('timer').innerText = '00:00:00';
}

clearInterval如上面所说的一样，全局变量获取简单来说就是全让变量为0

4. 继续
   跟开始计时原理差不多，这里就不详解了

function continueTimer() {
    if (timerInterval === null) {
        timerInterval = setInterval(() => {
            seconds++;
            if (seconds >= 60) {
                seconds = 0;
                minutes++;
                if (minutes >= 60) {
                    minutes = 0;
                    hours++;
                }
            }
            updateTimerDisplay();
        }, 1000);
    }
}

格式化计时器（时间字符串）

let timeString = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
function pad(value) {
    return value < 10 ? `0${value}` : value;
}

这里构造了一个格式化的时间字符串。使用模板字符串（反引号 `）来组合小时、分钟和秒数。pad 函数被用来确保每个时间部分都是两位数。如果没有两位数，则会在前面添加一个零。

${pad(hours)} 表示将 hours 变量传递给 pad 函数，并将结果转换为字符串插入到模板字符串中。