当前位置：首页 > 文章列表 > 文章 > 前端 > 工作日计时器JavaScript实现教程

工作日计时器JavaScript实现教程

2025-09-02 09:36:32 0浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《工作日计时器：JavaScript精准实现方法》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

JavaScript实现基于工作日和工作时间的精确计数器

本教程详细介绍了如何使用JavaScript创建一个高级计数器，该计数器能按分钟递增，并仅在指定的工作日（周一至周五）和工作时间（上午6点至晚上8点）内进行计数。文章将深入探讨如何准确计算初始值，包括过去工作日的分钟数和当前工作日已过的分钟数，同时确保在非工作时间或非工作日暂停计数但仍显示当前值，并在每月初自动重置。

引言：构建智能计数器的挑战

在许多应用场景中，我们需要实现一个能够根据特定规则进行计数的计时器。例如，一个项目进度跟踪器可能只需要在工作日的工作时间内累积时间。这要求计数器不仅能按设定的频率（如每分钟）递增，还需要智能地识别当前时间是否符合计数条件，并在不符合条件时暂停计数但仍显示当前值，同时在每月初自动重置。

实现这样一个计数器面临的主要挑战包括：

精确的时间判断： 准确识别当前是工作日还是周末，以及是否处于指定的工作时间段内。
初始值计算： 在页面加载或功能启动时，如何根据当前日期和时间，以及历史已过的工作时间，计算出正确的初始计数器值。这包括计算当前月份中已过去的所有工作日的总分钟数，以及当前工作日中已过的分钟数。
动态暂停与显示： 在非工作时间或非工作日，计数器应停止递增，但其当前值仍需持续显示。
每月自动重置： 确保计数器在每个月的第一天（如果是工作日）从零开始重新计数。

核心概念与参数配置

为了实现上述功能，我们首先需要定义一些核心参数并获取当前的时间状态：

function startCounter() {
    // 获取当前日期和时间
    var currentDate = new Date();
    var currentDay = currentDate.getDay(); // 0: 星期日, 1: 星期一, ..., 6: 星期六
    var currentHour = currentDate.getHours();
    var currentMinutes = currentDate.getMinutes();
    var currentDayOfMonth = currentDate.getDate(); // 当前月份的日期 (1-31)

    // 定义工作日和工作时间参数
    var weekEndDays = [0, 6]; // 星期日和星期六为周末
    var startHour = 6; // 工作开始时间 (上午6点)
    var endHour = 20; // 工作结束时间 (晚上8点，不包含20点)

    // 判断当前是否为周末或非工作时间
    var isWeekend = weekEndDays.indexOf(currentDay) > -1;
    var isOutsideWorkingHours = currentHour < startHour || currentHour >= endHour;

在这里：

weekEndDays 数组可以灵活配置周末。
startHour 和 endHour 定义了每日的工作时间范围。请注意，endHour 表示的时刻是工作时间结束的边界，例如 endHour = 20 意味着工作时间截止到19:59，20:00即为非工作时间。

精确计算计数器初始值

计数器的核心在于其初始值的准确性。当页面加载或功能启动时，我们需要计算出当前月份中，直到当前时刻为止，所有符合工作日和工作时间条件的累积分钟数。这分为两个主要部分：计算已过去的工作天数，以及计算当前工作日已过的分钟数。

1. 计算已过去的工作天数 (daysSinceStart)

我们需要遍历当前月份中从1号到当前日期前一天的所有日期，判断它们是否为工作日。

    // 计算从本月1号到当前日期前一天，已过去的工作天数
    var daysSinceStart = 0;
    for (let i = 1; i < currentDayOfMonth; i++) {
        let checkDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
        if (weekEndDays.indexOf(checkDate.getDay()) === -1) { // 如果不是周末
            daysSinceStart++;
        }
    }

这段代码确保了我们准确地统计了当前月份中，截至当前日期的前一天，所有符合工作日条件的完整天数。

2. 处理当前日期的情况

当前日期的情况相对复杂：

如果当前是工作日，并且已经过了工作时间（例如，现在是周二晚上9点），那么当前这一天也应该被视为一个完整的已过去的工作日。
如果当前是工作日，并且处于工作时间内，我们需要计算从工作时间开始到当前分钟已过去的时间。
如果当前是周末或非工作时间，那么 minutesSinceStartOfDay 应为0。

    var minutesSinceStartOfDay = 0;

    // 如果今天是工作日，且当前时间已超过工作结束时间，则将今天计为一个完整的工作日
    if (!isWeekend && isOutsideWorkingHours && currentHour >= endHour) {
        daysSinceStart++;
    }
    // 如果当前是工作日且处于工作时间内，计算当天已过的分钟数
    else if (!isWeekend && !isOutsideWorkingHours) {
        minutesSinceStartOfDay = (currentHour - startHour) * 60 + currentMinutes;
        console.log('Counter starting...');
    } else {
        console.log('Counter paused.');
    }

3. 整合计算初始值

一旦 daysSinceStart 和 minutesSinceStartOfDay 计算完毕，我们就可以确定计数器的初始值：

    // 计算每个工作日总分钟数
    var minutesPerWorkingDay = (endHour - startHour) * 60;
    // 计算计数器初始值
    var counter = daysSinceStart * minutesPerWorkingDay + minutesSinceStartOfDay;

这里的 minutesPerWorkingDay 是一个关键常量，代表一个完整工作日（6 AM 到 8 PM 之间，即14小时）的分钟数，即 (20 - 6) * 60 = 840 分钟。

实时计数与暂停逻辑

计数器的实时递增是通过 setInterval 实现的。关键在于在每次递增前，都需要重新判断当前时间是否符合计数条件。

    // 启动计数器，每分钟递增
    var intervalId = setInterval(function() {
        // 在每次递增前重新获取当前时间状态
        currentDate = new Date();
        currentDay = currentDate.getDay();
        currentHour = currentDate.getHours();
        currentMinutes = currentDate.getMinutes();
        isWeekend = weekEndDays.indexOf(currentDay) > -1;
        isOutsideWorkingHours = currentHour < startHour || currentHour >= endHour;

        if (isWeekend || isOutsideWorkingHours) {
            // 如果是周末或非工作时间，不递增，但仍显示当前值
            console.log('Counter:', counter, '(Paused)');
            return; // 暂停递增
        }
        counter++; // 符合条件时递增
        console.log('Counter:', counter);
    }, 60000); // 60000毫秒 = 1分钟

    // 页面加载时显示初始值
    console.log('Counter:', counter);
}

// 启动计数器
startCounter();

这里的核心改进是：

在 setInterval 的回调函数内部，每次执行时都重新获取当前的日期和时间，并重新判断 isWeekend 和 isOutsideWorkingHours。这确保了在跨越工作时间边界时，计数器能即时响应。
当 isWeekend 或 isOutsideWorkingHours 为真时，不再使用 return 语句直接退出 startCounter 函数，而是仅退出 setInterval 的当前回调，这样计数器的值仍然可以被 console.log 打印出来，实现了“暂停计数但仍显示值”的需求。

每月重置机制

本方案通过将计数器的初始值计算基于当前月份的1号，天然地实现了每月重置功能。当进入一个新的月份时，currentDate.getMonth() 会发生变化，从而 daysSinceStart 的计算会从新月份的1号重新开始，达到自动重置的效果。

完整代码示例

将以上所有部分整合，形成一个完整的、健壮的JavaScript计数器实现：

function startCounter() {
    // 获取当前日期和时间
    var currentDate = new Date();
    var currentDay = currentDate.getDay(); // 0: 星期日, 1: 星期一, ..., 6: 星期六
    var currentHour = currentDate.getHours();
    var currentMinutes = currentDate.getMinutes();
    var currentDayOfMonth = currentDate.getDate(); // 当前月份的日期 (1-31)

    // 定义工作日和工作时间参数
    var weekEndDays = [0, 6]; // 星期日和星期六为周末
    var startHour = 6; // 工作开始时间 (上午6点)
    var endHour = 20; // 工作结束时间 (晚上8点，不包含20点)

    // 判断当前是否为周末或非工作时间
    var isWeekend = weekEndDays.indexOf(currentDay) > -1;
    var isOutsideWorkingHours = currentHour < startHour || currentHour >= endHour;

    // 计算从本月1号到当前日期前一天，已过去的工作天数
    var daysSinceStart = 0;
    for (let i = 1; i < currentDayOfMonth; i++) {
        let checkDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
        if (weekEndDays.indexOf(checkDate.getDay()) === -1) { // 如果不是周末
            daysSinceStart++;
        }
    }

    var minutesSinceStartOfDay = 0;

    // 如果今天是工作日，且当前时间已超过工作结束时间，则将今天计为一个完整的工作日
    if (!isWeekend && isOutsideWorkingHours && currentHour >= endHour) {
        daysSinceStart++;
    }
    // 如果当前是工作日且处于工作时间内，计算当天已过的分钟数
    else if (!isWeekend && !isOutsideWorkingHours) {
        minutesSinceStartOfDay = (currentHour - startHour) * 60 + currentMinutes;
        console.log('Counter starting...');
    } else {
        console.log('Counter paused.');
    }

    // 计算每个工作日总分钟数
    var minutesPerWorkingDay = (endHour - startHour) * 60; // 14小时 * 60分钟 = 840分钟
    // 计算计数器初始值
    var counter = daysSinceStart * minutesPerWorkingDay + minutesSinceStartOfDay;

    // 启动计数器，每分钟递增
    var intervalId = setInterval(function() {
        // 在每次递增前重新获取当前时间状态
        currentDate = new Date();
        currentDay = currentDate.getDay();
        currentHour = currentDate.getHours();
        currentMinutes = currentDate.getMinutes(); // 重新获取分钟数，确保跨分钟时判断准确
        isWeekend = weekEndDays.indexOf(currentDay) > -1;
        isOutsideWorkingHours = currentHour < startHour || currentHour >= endHour;

        if (isWeekend || isOutsideWorkingHours) {
            // 如果是周末或非工作时间，不递增，但仍显示当前值
            console.log('Counter:', counter, '(Paused)');
            return; // 暂停递增
        }
        counter++; // 符合条件时递增
        console.log('Counter:', counter);
    }, 60000); // 60000毫秒 = 1分钟

    // 页面加载时显示初始值
    console.log('Counter:', counter);
}

// 启动计数器
startCounter();

注意事项与优化建议

setInterval 的精度： setInterval 并非绝对精确，它只能保证在指定的时间间隔后将任务放入执行队列，实际执行时间可能会因浏览器负载、CPU调度等因素而略有延迟。对于需要极高精度的计时场景，应考虑使用服务器端时间戳或更复杂的同步机制。
页面刷新与持久化： 当前方案在页面刷新时会根据当前的日期和时间重新计算计数器的初始值，实现了“断点续计”的效果。如果需要跨浏览器会话或设备持久化计数器状态，可以考虑将 counter 的值存储到 localStorage 中，并在 startCounter 函数开始时尝试读取，或者将计数逻辑放在后端服务器。
时区考量： Date 对象在客户端运行时会受用户本地时区影响。如果您的应用需要全球用户统一的计数标准，建议将时间计算逻辑放在服务器端，或在客户端明确指定时区。
可维护性： 可以将 60000 这样的“魔术数字”定义为常量（例如 const ONE_MINUTE_MS = 60 * 1000;），提高代码的可读性和可维护性。
错误处理： 对于生产环境的应用，可能需要添加额外的错误处理机制，例如检查 Date 对象是否有效等。

通过以上详细的步骤和代码实现，您可以构建一个功能完善、逻辑清晰的JavaScript计数器，满足在特定工作日和工作时间内进行计数的复杂需求。

今天关于《工作日计时器JavaScript实现教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！