本文详细介绍了如何使用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 到当前时间已经过去了多少分钟。
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定时计数器。该计数器能够精确地在指定的工作日和工作时间内递增，并在非工作时间暂停递增但保持值可见，同时具备每月自动重置的能力。这种实现方式灵活且易于理解，为客户端基于时间条件的计数需求提供了一个可靠的解决方案。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
