本文将指导你如何使用 JavaScript 创建一个只在工作时段递增的计数器。该计数器会在工作日（周一至周五）的早上 6 点到晚上 8 点之间每分钟递增 1。周末和非工作时段计数器会暂停，但会显示已计数值。每月初，计数器会重置并重新开始计数。本文提供详细的代码示例和逻辑解释，助你轻松实现此功能。
创建工作时段计数器
下面我们将详细介绍如何使用 JavaScript 实现一个只在工作时段递增的计数器。
1. 获取当前时间和日期
首先，我们需要获取当前的日期和时间，以便确定是否在工作时段内。
立即学习“Java免费学习笔记（深入）”；
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();2. 定义工作时段
接下来，我们需要定义工作日的范围（周一至周五）和工作时段（早上 6 点到晚上 8 点）。
// 定义工作时段 var weekEndDays = [0, 6]; // 周末日 - 可以添加或删除 var isWeekend = weekEndDays.indexOf(currentDay) > -1; // 是否是周末？ var startHour = 6; var endHour = 20; var isOutsideWorkingHours = currentHour < startHour || currentHour >= endHour; // 在 startHour 之前或 endHour 之后
3. 计算自月初以来的工作日天数
我们需要计算自月初以来经过了多少个工作日，以便设置计数器的初始值。
// 获取当月的第一天
var startingDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); // 当月 1 号
// 计算自月初以来的工作日天数（不包括周末和今天）
var daysSinceStart = 0;
for (let i = 1; i < currentDayOfMonth; i++) {
let checkDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
if (checkDate.getDay() !== 0 && checkDate.getDay() !== 6) {
daysSinceStart++;
}
}
var minutesSinceStartOfDay = 0;
// 如果今天是工作日，且工作时间已结束，则将其计为完整的一天
if (!isWeekend && isOutsideWorkingHours && currentHour >= endHour) {
daysSinceStart++;
}
// 如果是周末或非工作时间，显示 'Counter paused.'
// 否则，计算从工作日开始的分钟数并显示 'Counter starting...'
if (isWeekend || isOutsideWorkingHours) {
console.log('Counter paused.');
//return;
} else {
minutesSinceStartOfDay = (currentHour - startHour) * 60 + currentMinutes;
console.log('Counter starting...');
}4. 初始化计数器
根据计算出的工作日天数和当前时间，我们可以初始化计数器的值。
// 计算计数器的初始值，基于之前的工作日天数 // (endHour-startHour)*60 minutes in a day // 初始化计数器 var counter = daysSinceStart * (endHour - startHour) * 60 + minutesSinceStartOfDay;
5. 每分钟递增计数器
使用 setInterval 函数，我们可以每分钟递增计数器的值。
// 每分钟递增计数器
var intervalId = setInterval(function() {
if (isWeekend || isOutsideWorkingHours) {
console.log('Counter:', counter);
return;
}
counter++;
console.log('Counter:', counter);
}, 60000); // 60000 毫秒 = 1 分钟6. 显示计数器值
最后，我们需要在页面刷新时显示计数器的值。
// 在页面刷新时显示计数器值
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 isWeekend = weekEndDays.indexOf(currentDay) > -1; // 是否是周末？
var startHour = 6;
var endHour = 20;
var isOutsideWorkingHours = currentHour < startHour || currentHour >= endHour; // 在 startHour 之前或 endHour 之后
// 获取当月的第一天
var startingDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); // 当月 1 号
// 计算自月初以来的工作日天数（不包括周末和今天）
var daysSinceStart = 0;
for (let i = 1; i < currentDayOfMonth; i++) {
let checkDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
if (checkDate.getDay() !== 0 && checkDate.getDay() !== 6) {
daysSinceStart++;
}
}
var minutesSinceStartOfDay = 0;
// 如果今天是工作日，且工作时间已结束，则将其计为完整的一天
if (!isWeekend && isOutsideWorkingHours && currentHour >= endHour) {
daysSinceStart++;
}
// 如果是周末或非工作时间，显示 'Counter paused.'
// 否则，计算从工作日开始的分钟数并显示 'Counter starting...'
if (isWeekend || isOutsideWorkingHours) {
console.log('Counter paused.');
//return;
} else {
minutesSinceStartOfDay = (currentHour - startHour) * 60 + currentMinutes;
console.log('Counter starting...');
}
// 计算计数器的初始值，基于之前的工作日天数
// (endHour-startHour)*60 minutes in a day
// 初始化计数器
var counter = daysSinceStart * (endHour - startHour) * 60 + minutesSinceStartOfDay;
// 每分钟递增计数器
var intervalId = setInterval(function() {
if (isWeekend || isOutsideWorkingHours) {
console.log('Counter:', counter);
return;
}
counter++;
console.log('Counter:', counter);
}, 60000); // 60000 毫秒 = 1 分钟
// 在页面刷新时显示计数器值
console.log('Counter:', counter);
}
// 启动计数器
startCounter();注意事项
- 存储计数器值： 此示例仅在浏览器会话期间保持计数器值。要持久存储计数器值，你需要使用本地存储、会话存储或服务器端数据库。
- 时区： 确保你的代码考虑了用户的时区，以便正确计算工作时段。
- 错误处理： 添加错误处理机制以处理意外情况，例如日期或时间格式错误。
- 性能： 对于高流量应用程序，请考虑优化代码以提高性能，例如使用更高效的日期和时间计算方法。
总结
通过以上步骤，你已经成功创建了一个只在工作时段递增的 JavaScript 计数器。你可以根据自己的需求修改代码，例如更改工作时段、添加其他条件或使用不同的存储机制。希望本教程对你有所帮助！
