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计数器,满足在特定工作日和工作时间内进行计数的复杂需求。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1502

2023.10.24

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

531

2023.09.20

console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

415

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

510

2024.05.29

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

2

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

2

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

0

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

0

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.29

热门下载

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

精品课程

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

共1课时 | 0.1万人学习

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

共26课时 | 5.1万人学习

前端工程化(ES6模块化和webpack打包)
前端工程化(ES6模块化和webpack打包)

共24课时 | 5.1万人学习

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

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