构建按工作日和工作时间运行的JavaScript计数器-js教程-PHP中文网

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

霞舞

发布： 2025-08-19 23:20:01

原创

1033人浏览过

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

本文详细介绍了如何使用JavaScript构建一个精确的定时计数器。该计数器每分钟递增一次，但仅在预设的工作日（周一至周五）和工作时间（如上午6点至晚上8点）内运行。它能在非工作时间暂停递增但显示当前值，并在每月的第一天自动重置，确保计数逻辑的准确性和灵活性。

概述

在许多应用场景中，我们需要一个计数器，它不仅要按固定频率递增，还要严格遵循特定的时间规则，例如只在工作日的工作时间内活跃。此外，计数器可能还需要在特定周期（如每月）自动重置。本文将探讨如何利用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 < startHour || currentHour >= endHour; // 判断是否在工作时间之外

登录后复制

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

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

立即学习“Java免费学习笔记（深入）”；

var daysSinceStart = 0;
// 遍历从本月1号到当前日期前一天
for (let i = 1; i < currentDayOfMonth; i++) {
    let checkDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
    // 如果不是周末，则计入工作日
    if (checkDate.getDay() !== 0 && checkDate.getDay() !== 6) {
        daysSinceStart++;
    }
}

// 如果当前是工作日，且当前时间已过工作结束时间，则将今天也视为一个完整的工作日
// 这样可以确保即使在非工作时间刷新页面，前一天的工作时间也被完整计算
if (!isWeekend && isOutsideWorkingHours && currentHour >= endHour) {
    daysSinceStart++;
}

登录后复制

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

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

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

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

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 < startHour || 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 < 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++;
        }
    }

    // 如果今天是工作日且当前时间已过工作结束时间，则将今天也视为一个完整的工作日
    if (!isWeekend && isOutsideWorkingHours && currentHour >= 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 < startHour || 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();

登录后复制

注意事项与优化

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