【前端】定时器实现時鐘的两种方法

前言:

/**
 * 设计思路
 * 当加载组件的时候调用该方法，并实现实时的时钟时间，有两种解决方案：
 * 第一种：每一秒获取时间，并计算倒计时
 * - 优点：准确
 * - 缺点：实时调用API，性能消耗很大
 *
 * 第二种：获取一次时间之后，开启定时器，每一秒加上1s。
 * - 优点：不用实时调用API，性能消耗不大
 * - 缺点：有可能被其他进程抢夺，所以不太准确（如果系统负载较高或者有其他进程干扰定时器的精确度，可能会导致时间显示不准确。）
 */

第一种

通过实时获取当前时间来更新时间：

let date,hours,minutes,seconds;
function DateToHTML(){
    console.log(parseInt(hours) + ":" + parseInt(minutes) + ":" + parseInt(seconds));
}

setInterval(function(){
    date = new Date();
    hours = date.getHours().toString().padStart(2, '0');
    minutes = date.getMinutes().toString().padStart(2, '0');
    seconds = date.getSeconds().toString().padStart(2, '0');
    DateToHTML();
},1000)

第二种

获取一次时间之后就每一秒加上1s：

/**
 * 设计思路
 * 当加载组件的时候调用该方法，并实现实时的时钟时间。
 * 采用第二种解决方案：获取一次时间之后，开启定时器，每一秒加上1s。
 */

// 定义一个对象来存储时间和定时器引用
const clock = {
    totalSeconds: 0,
    hours: null,
    minutes: null,
    seconds: null,
    timerInterval: null
};

function initializeClock() {
    // 获取初始时间
    const today = new Date();
    clock.hours = today.getHours().toString().padStart(2, '0');
    clock.minutes = today.getMinutes().toString().padStart(2, '0');
    clock.seconds = today.getSeconds().toString().padStart(2, '0');
    clock.totalSeconds = today.getSeconds();

    // 如果尚未设置定时器，则设置定时器
    if (!clock.timerInterval) {
        clock.timerInterval = setInterval(updateClock, 1000);
    }
}

function updateClock() {
    // 每秒增加1秒
    clock.totalSeconds += 1;
    clock.seconds = (clock.totalSeconds % 60).toString().padStart(2, '0');

    // 每分钟重置秒数，增加1分钟
    if (clock.totalSeconds >= 60) {
        clock.totalSeconds -= 60;
        clock.minutes = (clock.totalSeconds / 60).toString().padStart(2, '0');
    }

    // 每小时重置分钟和秒数，增加1小时
    if (clock.totalSeconds >= 3600) {
        clock.totalSeconds -= 3600;
        clock.hours = (clock.totalSeconds / 3600).toString().padStart(2, '0');
    }

    // 输出时间到HTML元素
    displayTime(clock.hours, clock.minutes, clock.seconds);
}

function displayTime(h, m, s) {
    console.log(`${h}:${m}:${s}`);
}

// 初始化时钟显示
initializeClock();

更多内容：

前端如何解决倒计时功能