生成准确表达文章主题的标题实现工作时段计数器:JavaScript 教程

生成准确表达文章主题的标题实现工作时段计数器:javascript 教程

本文将指导你如何使用 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 = endHour; // 在 startHour 之前或 endHour 之后

3. 计算自月初以来的工作日天数

我们需要计算自月初以来经过了多少个工作日,以便设置计数器的初始值。

  // 获取当月的第一天  var startingDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); // 当月 1 号  // 计算自月初以来的工作日天数(不包括周末和今天)  var daysSinceStart = 0;  for (let i = 1; i = 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 = endHour; // 在 startHour 之前或 endHour 之后  // 获取当月的第一天  var startingDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); // 当月 1 号  // 计算自月初以来的工作日天数(不包括周末和今天)  var daysSinceStart = 0;  for (let i = 1; i = 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 计数器。你可以根据自己的需求修改代码,例如更改工作时段、添加其他条件或使用不同的存储机制。希望本教程对你有所帮助!

以上就是生成准确表达文章主题的标题实现工作时段计数器:JavaScript 教程的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1516472.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 10:04:43
下一篇 2025年12月20日 10:04:55

相关推荐

  • iFrame状态持久化:刷新后保持内部导航位置的实现策略

    当页面刷新时,iFrame内部的导航状态通常会重置回其初始src链接,导致用户体验不佳。本文将深入探讨如何解决iFrame在页面刷新后无法保持其内部链接的问题,提供两种主要的解决方案:基于客户端存储进行状态恢复,以及通过父页面URL同步iFrame状态。通过详细的实现步骤、代码示例和注意事项,帮助开…

    2025年12月20日
    000
  • AG Grid 固定列最大宽度与滚动优化教程

    本教程旨在解决AG Grid中固定列过多导致非固定列数据被遮挡的问题。由于AG Grid核心功能缺乏直接解决方案,本文将介绍一种通过DOM操作、自定义容器包裹、事件监听实现滚动同步以及CSS样式覆盖的非标准方法。该方案能为固定列设置最大宽度并使其可水平滚动,同时保持与非固定列的协调,但需注意其“ha…

    2025年12月20日
    000
  • 动态HTML表格行中输入字段的联动自动填充教程

    本教程详细阐述了如何在动态生成的HTML表格行中实现输入字段的联动自动填充。通过摒弃对固定ID的依赖,转而利用CSS类和事件上下文传递,我们能够确保JavaScript函数准确地操作当前行内的元素,从而实现高效、可扩展的数据填充逻辑,尤其适用于需要重复创建相同结构元素的场景。 动态HTML表格行中的…

    2025年12月20日
    000
  • PHP循环中JavaScript代码去重与高效事件处理指南

    本教程旨在解决PHP循环中嵌入大量重复JavaScript代码的问题,这些代码通常用于处理动态生成元素的交互。我们将介绍如何通过事件委托机制、统一使用CSS类而非动态ID,并结合event.target、closest和querySelector等现代DOM操作方法,实现JavaScript代码的去…

    2025年12月20日
    000
  • PHP循环中动态生成JavaScript代码的优化策略

    本文旨在解决PHP循环中嵌入重复JavaScript代码导致的维护性与性能问题。通过引入事件委托机制,结合类选择器和DOM遍历方法(如event.target、closest、querySelector),实现JavaScript代码的集中管理和复用。教程将详细阐述如何重构HTML结构和JavaSc…

    2025年12月20日
    000
  • Nuxt useFetch 数据即时访问指南:SSR影响与解决方案

    本文深入探讨了Nuxt useFetch 在客户端生命周期钩子中数据访问延迟或返回null/proxy对象的问题。主要原因在于Nuxt默认的服务器端渲染(SSR)机制。教程提供了两种核心解决方案:一是通过routeRules禁用特定路由的SSR以实现客户端即时数据获取;二是在保持SSR的同时,利用u…

    2025年12月20日
    000
  • Nuxt useFetch 数据访问延迟问题及解决方案:SSR与拦截器深度解析

    本文深入探讨Nuxt useFetch 在获取API数据时,response.data.value 初期显示 null 的常见问题。该现象通常与Nuxt的默认服务器端渲染(SSR)行为有关。文章提供了三种有效的解决方案:通过 routeRules 关闭特定路由的SSR,利用 useFetch 的 o…

    2025年12月20日
    000
  • Iframe内容持久化:刷新后保持嵌入页面状态的策略与实践

    本教程详细探讨了如何解决HTML Iframe内容重置的原理 核心策略一:基于本地存储的状态持久化 这种方法的核心思想是:在 实现步骤 监听Iframe导航事件 同源策略限制: 这一点至关重要。如果 跨域情况: 如果 同源示例(假设iframe_a是同源): const iframe = docum…

    2025年12月20日
    000
  • 在GitHub上更新JSON文件:理解限制与正确方法

    本文旨在阐明通过客户端JavaScript直接修改GitHub上静态JSON文件的局限性,特别是涉及CORS策略的POST请求失败问题。我们将探讨为何这种直接操作不可行,介绍GitHub官方API作为文件更新途径,并最终推荐使用后端服务结合数据库的专业解决方案,以确保数据操作的安全性和可持续性。 1…

    2025年12月20日
    000
  • JavaScript实现HTML表格多列实时搜索功能

    本教程将指导您如何使用现代JavaScript和DOM操作,为HTML表格实现高效的多列实时搜索功能。通过利用forEach循环和Array.prototype.some()方法,我们将优化传统单列搜索逻辑,使用户能够同时在表格的所有列中查找匹配项,从而显著提升数据筛选的用户体验。 挑战:传统单列搜…

    2025年12月20日
    000
  • 在GitHub上安全更新JSON文件:理解CORS限制与API应用实践

    本文深入探讨了在GitHub上直接通过客户端JavaScript修改JSON文件时遇到的CORS错误,并解释了其背后的安全原理。我们将介绍两种正确的解决方案:利用GitHub REST API进行文件内容管理,以及更健壮的后端服务与数据库方案,旨在帮助开发者理解并实践安全有效的数据更新策略。 问题剖…

    2025年12月20日
    000
  • Puppeteer 爬取网页数据返回空数组问题解决方案

    本文针对使用 Puppeteer 爬取 naamhinaam.com 网站数据时,出现返回空数组的问题,提供了一套可行的解决方案。通过分析问题代码,找出选择器和循环逻辑上的错误,并提供优化后的代码示例,确保能正确抓取网页上的婴儿名字和含义信息,并避免因广告元素干扰导致的问题。本文还强调了headle…

    2025年12月20日
    000
  • 使用 Puppeteer 抓取网页数据返回空数组的解决方案

    本文旨在解决在使用 Puppeteer 抓取网页数据时,遇到返回空数组的问题。通过分析问题代码,找到导致问题的原因,并提供修正后的代码示例,确保能正确抓取目标网站的数据,并清晰地呈现抓取结果。本文重点关注选择器的使用和异步操作的处理,帮助开发者避免类似问题。 在使用 Puppeteer 进行网页数据…

    2025年12月20日
    000
  • 使用 Puppeteer 抓取网页数据返回空数组问题的解决方案

    本文旨在解决在使用 Puppeteer 抓取网页数据时,遇到返回空数组的问题。通过分析常见原因,并提供优化后的代码示例,帮助开发者更有效地抓取目标网站的数据,并避免抓取结果为空的情况。本文将重点关注选择器优化、页面元素加载以及数据提取等关键环节。 问题分析 在使用 Puppeteer 进行网页数据抓…

    2025年12月20日
    000
  • 什么是CommonJS和ES模块?

    CommonJS采用同步加载和值拷贝,模块导出的是静态值;ES模块支持异步加载和动态引用,导出绑定保持实时更新,两者在加载机制、缓存策略及变量绑定上存在本质差异。 CommonJS和ES模块是JavaScript中两种主要的模块化规范,它们定义了代码如何被组织、导入和导出。CommonJS主要用于N…

    2025年12月20日
    000
  • 浏览器JS线程模型是什么?

    JavaScript在浏览器中是单线程的,通过事件循环机制实现异步非阻塞操作。主线程负责执行JS代码、渲染页面和处理用户交互,为避免DOM操作冲突,一次只能执行一个任务。耗时操作由浏览器的Web APIs处理,完成后将回调放入任务队列。事件循环在执行栈空闲时,优先执行微任务队列中的任务(如Promi…

    2025年12月20日
    000
  • 如何调试第三方库问题?

    答案是调试第三方库需通过复现隔离、查阅文档、分析堆栈、使用调试器和日志等手段定位问题,针对无源码库可采用反编译、抓包、行为分析等方式,当问题严重、社区活跃且具备修复能力时,应贡献代码而非仅用临时方案。 调试第三方库问题,核心在于隔离、定位和理解。这通常意味着你需要从纷繁复杂的外部依赖中抽丝剥茧,找到…

    2025年12月20日
    000
  • 如何配置JS金丝雀发布?

    答案:配置JavaScript金丝雀发布需从代码版本管理、流量分发和监控回滚入手,通过服务器端按用户分流量加载新JS,结合实时错误与性能监控,在确保稳定后逐步扩大范围,最终全量发布,以降低风险。 配置JavaScript金丝雀发布,本质上是在不影响绝大多数用户的前提下,将新版本的JS代码悄悄推给一小…

    2025年12月20日
    000
  • 怎样使用Node.js操作URL?

    Node.js中推荐使用符合WHATWG标准的URL全局对象,因其API更现代、查询参数处理更便捷,且能自动规范化路径;url模块虽兼容旧代码,但灵活性差且易出错,新项目应优先选择URL对象。 Node.js操作URL主要依赖内置的 url 模块和全局的 url 对象。它们能帮助我们解析URL的各个…

    2025年12月20日
    000
  • Oracle APEX:掌握通过JavaScript正确调用应用程序级进程的方法

    本教程详细阐述了在Oracle APEX中通过JavaScript动态调用应用程序级进程的正确方法。它澄清了apex.submit()与apex.server.process()之间的关键区别,指出前者仅用于页面提交,而后者才是执行命名服务器端进程的AJAX首选。文章提供了示例代码和配置指导,帮助开…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信