概述
在许多应用场景中，我们需要一个计数器，它不仅要按固定频率递增，还要严格遵循特定的时间规则，例如只在工作日的工作时间内活跃。此外，计数器可能还需要在特定周期（如每月）自动重置。本文将探讨如何利用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 到当前时间已经过去了多少分钟。
PLC编程入门基础知识 中文doc版
下载
可编程序控制器，英文称Programmable Controller，简称PC。但由于PC容易和个人计算机（Personal Computer）混淆，故人们仍习惯地用PLC作为可编程序控制器的缩写。它是一个以微处理器为核心的数字运算操作的电子系统装置，专为在工业现场应用而设计，它采用可编程序的存储器，用以在其内部存储执行逻辑运算、顺序控制、定时/计数和算术运算等操作指令，并通过数字式或模拟式的输入、输出接口，控制各种类型的机械或生产过程。本平台提供PLC编程入门基础知识下载，需要的朋友们下载看看吧！
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) 来计算，隐式地实现了每月重置的功能。
- 边界条件: 代码已考虑了在工作日但已过工作时间的情况，将其计入一个完整的工作日，增强了计数的准确性。
总结
通过上述方法，我们成功构建了一个符合特定业务需求的JavaScript定时计数器。该计数器能够精确地在指定的工作日和工作时间内递增，并在非工作时间暂停递增但保持值可见，同时具备每月自动重置的能力。这种实现方式灵活且易于理解，为客户端基于时间条件的计数需求提供了一个可靠的解决方案。
