0

0

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

聖光之護

聖光之護

发布时间:2025-08-20 11:18:00

|

303人浏览过

|

来源于php中文网

原创

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

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

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

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

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

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

核心概念与参数配置

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

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;

在这里:

立即学习Java免费学习笔记(深入)”;

  • 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. 处理当前日期的情况

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

华友协同办公自动化OA系统
华友协同办公自动化OA系统

华友协同办公管理系统(华友OA),基于微软最新的.net 2.0平台和SQL Server数据库,集成强大的Ajax技术,采用多层分布式架构,实现统一办公平台,功能强大、价格便宜,是适用于企事业单位的通用型网络协同办公系统。 系统秉承协同办公的思想,集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、

下载
  • 如果当前是工作日,并且已经过了工作时间(例如,现在是周二晚上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();

注意事项与优化建议

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

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

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

545

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

728

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

655

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

547

2023.09.20

python设置中文版教程合集
python设置中文版教程合集

本专题整合了python改成中文版相关教程,阅读专题下面的文章了解更多详细内容。

1

2026.01.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何进行WebSocket调试
如何进行WebSocket调试

共1课时 | 0.1万人学习

TypeScript全面解读课程
TypeScript全面解读课程

共26课时 | 5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号