构建按工作日和工作时间运行的JavaScript计数器

概述

在许多应用场景中，我们需要一个计数器，它不仅要按固定频率递增，还要严格遵循特定的时间规则，例如只在工作日的工作时间内活跃。此外，计数器可能还需要在特定周期（如每月）自动重置。本文将探讨如何利用JavaScript实现这样一个功能强大的定时计数器，并解决在实现过程中可能遇到的常见问题。

核心逻辑构建

构建此计数器的关键在于精确判断当前时间是否符合工作条件，并正确计算从月初至今的累计分钟数。

1. 获取当前日期和时间信息

首先，我们需要获取当前的日期和时间，包括星期、小时、分钟和月份中的日期。这些信息将用于判断当前是否处于工作时间段。

var currentDate = new Date();
var currentDay = currentDate.getDay(); // 0: 星期日, 1: 星期一, ..., 6: 星期六
var currentHour = currentDate.getHours();
var currentMinutes = currentDate.getMinutes();
var currentDayOfMonth = currentDate.getDate(); // 月份中的第几天

2. 定义工作日和工作时间

为了使计数器更具灵活性，我们将工作日和工作时间的范围定义为可配置的变量。

var weekEndDays = [0, 6]; // 星期日和星期六为周末
var startHour = 6; // 工作开始小时 (例如: 早上6点)
var endHour = 20; // 工作结束小时 (例如: 晚上8点)

var isWeekend = weekEndDays.indexOf(currentDay) > -1; // 判断是否为周末
var isOutsideWorkingHours = currentHour = endHour; // 判断是否在工作时间之外

3. 计算历史工作日累计分钟数

计数器需要从每月的第一天开始累计。这意味着我们需要计算从本月1号到当前日期前一天，总共有多少个工作日，并将其转换为对应的分钟数。

var daysSinceStart = 0;
// 遍历从本月1号到当前日期前一天
for (let i = 1; i = endHour) {
    daysSinceStart  ;
}

需要注意的是，这里每天的工作分钟数应根据 endHour - startHour 计算，而不是固定值。例如，从6点到20点，每天工作时间为 (20 - 6) * 60 = 840 分钟。

4. 计算当前工作日已过分钟数

如果当前是工作日且在工作时间内，我们需要计算从 startHour 到当前时间已经过去了多少分钟。

var minutesSinceStartOfDay = 0;
if (!isWeekend && !isOutsideWorkingHours) { // 仅在工作日且工作时间内计算
    minutesSinceStartOfDay = (currentHour - startHour) * 60   currentMinutes;
}

5. 初始化计数器值

计数器的初始值由两部分组成：历史工作日的总分钟数和当前工作日已过的分钟数。

// (endHour - startHour) * 60 是每天的总工作分钟数
var counter = daysSinceStart * (endHour - startHour) * 60   minutesSinceStartOfDay;

6. 实现每分钟递增逻辑

使用 setInterval 函数每分钟递增计数器。关键在于，即使在非工作时间，计数器也应显示其当前值，但停止递增。因此，判断逻辑应放在 setInterval 回调函数内部。

var intervalId = setInterval(function() {
    // 重新评估当前时间是否在工作时间范围内
    var tempDate = new Date();
    var tempDay = tempDate.getDay();
    var tempHour = tempDate.getHours();

    var tempIsWeekend = weekEndDays.indexOf(tempDay) > -1;
    var tempIsOutsideWorkingHours = tempHour = endHour;

    if (tempIsWeekend || tempIsOutsideWorkingHours) {
        console.log('Counter paused. Current value:', counter); // 暂停递增，但显示当前值
        return; // 不递增
    }
    counter  ;
    console.log('Counter:', counter);
}, 60000); // 60000 毫秒 = 1 分钟

7. 页面加载时显示初始值

在 startCounter 函数的末尾，显示计算出的初始计数器值，确保页面加载时即可见。

console.log('Counter:', counter);

完整代码示例

将上述逻辑整合到 startCounter 函数中：

function startCounter() {
    // 获取当前日期和时间
    var currentDate = new Date();
    var currentDay = currentDate.getDay(); // 0: Sunday, 1: Monday, ..., 6: Saturday
    var currentHour = currentDate.getHours();
    var currentMinutes = currentDate.getMinutes();
    var currentDayOfMonth = currentDate.getDate();

    // 定义周末和工作时间
    var weekEndDays = [0, 6]; // 周末天数
    var startHour = 6;       // 工作开始小时
    var endHour = 20;        // 工作结束小时

    // 判断是否为周末或在工作时间之外
    var isWeekend = weekEndDays.indexOf(currentDay) > -1;
    var isOutsideWorkingHours = currentHour = endHour;

    // 计算从本月1号到当前日期前一天的累计工作日
    var daysSinceStart = 0;
    for (let i = 1; i = endHour) {
        daysSinceStart  ;
    }

    // 计算当前工作日已过的分钟数
    var minutesSinceStartOfDay = 0;
    if (!isWeekend && !isOutsideWorkingHours) {
        minutesSinceStartOfDay = (currentHour - startHour) * 60   currentMinutes;
        console.log('Counter starting...');
    } else {
        console.log('Counter paused.');
    }

    // 计算每天的总工作分钟数
    var dailyWorkingMinutes = (endHour - startHour) * 60;

    // 初始化计数器值
    var counter = daysSinceStart * dailyWorkingMinutes   minutesSinceStartOfDay;

    // 每分钟递增计数器
    var intervalId = setInterval(function() {
        // 在每次递增前重新评估时间状态
        var tempDate = new Date();
        var tempDay = tempDate.getDay();
        var tempHour = tempDate.getHours();

        var tempIsWeekend = weekEndDays.indexOf(tempDay) > -1;
        var tempIsOutsideWorkingHours = tempHour = endHour;

        if (tempIsWeekend || tempIsOutsideWorkingHours) {
            console.log('Counter (paused):', counter); // 暂停递增，但显示当前值
            return; // 不递增
        }
        counter  ;
        console.log('Counter:', counter);
    }, 60000); // 60000 毫秒 = 1 分钟

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

// 启动计数器
startCounter();

注意事项与优化

1. 精确性与 setInterval: setInterval 并非总能保证精确的间隔时间，尤其是在浏览器标签页不活跃或系统资源紧张时。对于需要极高时间精度的场景，可能需要更复杂的基于 requestAnimationFrame 或服务器时间同步的方案。然而，对于大多数客户端计数器，setInterval 已足够。
2. 数据持久化: 当前的实现方式在每次页面刷新时都会重新计算计数器值。如果需要计数器值在用户关闭浏览器或离开页面后依然保持，则需要将 counter 值存储在本地（如使用 localStorage）或发送到服务器进行持久化。
3. 可配置性: 通过将 startHour, endHour, weekEndDays 定义为变量，使得计数器逻辑可以灵活适应不同的工作时间表。
4. 每月重置: 计数器通过每次启动时都基于 new Date(currentDate.getFullYear(), currentDate.getMonth(), 1) 来计算，隐式地实现了每月重置的功能。
5. 边界条件: 代码已考虑了在工作日但已过工作时间的情况，将其计入一个完整的工作日，增强了计数的准确性。

总结

通过上述方法，我们成功构建了一个符合特定业务需求的JavaScript定时计数器。该计数器能够精确地在指定的工作日和工作时间内递增，并在非工作时间暂停递增但保持值可见，同时具备每月自动重置的能力。这种实现方式灵活且易于理解，为客户端基于时间条件的计数需求提供了一个可靠的解决方案。

以上是构建按工作日和工作时间运行的JavaScript计数器的详细内容。更多信息请关注PHP中文网其他相关文章！