如何使用 JavaScript 自动检测日历 Web 应用程序中的日期更改

JavaScript 日期变化检测：第一种解决方案：使用 setTimeout 并计算毫秒

前端 JavaScript 方法，用于确定午夜之前的剩余时间并启动回调

// Function to calculate milliseconds until midnight
function msUntilMidnight() {
  const now = new Date();
  const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
  return midnight - now;
}

// Function to highlight the current date on the calendar
function highlightCurrentDate() {
  const today = new Date();
  // Logic to highlight today's date on your calendar goes here
  console.log("Highlighted Date:", today.toDateString());
}

// Initial call to highlight today's date
highlightCurrentDate();

// Set a timeout to run the callback at midnight
setTimeout(function() {
  highlightCurrentDate();
  setInterval(highlightCurrentDate, 86400000); // Refresh every 24 hours
}, msUntilMidnight());

JavaScript 日期更改检测：解决方案 2：使用 setInterval 每小时检查一次

JavaScript 解决方案每小时检查一次日期，而不是使用 setInterval 持续检查日期

// Function to highlight the current date on the calendar
function highlightCurrentDate() {
  const today = new Date();
  // Logic to highlight today's date on your calendar goes here
  console.log("Highlighted Date:", today.toDateString());
}

// Initial call to highlight today's date
highlightCurrentDate();

// Set an interval to check the date every hour (3600000 ms)
setInterval(function() {
  const now = new Date();
  if (now.getHours() === 0) { // Check if it's midnight
    highlightCurrentDate();
  }
}, 3600000);

JavaScript 日期变化检测：第三种解决方案：使用 Node.js 和 Cron 作业的后端方法

Node.js 后端解决方案使用 node-cron 包更新突出显示的日期。

// Install the cron package: npm install node-cron
const cron = require('node-cron');
const express = require('express');
const app = express();

// Cron job to run every midnight
cron.schedule('0 0 * * *', () => {
  console.log('It\'s midnight! Updating the highlighted date...');
  // Logic to update the highlighted date in the database
});

// Start the server
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

将 Date Observer 与 MutationObserver 结合使用：JavaScript 日期更改检测的解决方案 4

JavaScript 中的实验，使用 MutationObserver 监视文档更新以检测日期更改

// Create a function to update date and observe changes
function observeDateChange() {
  const targetNode = document.getElementById('dateDisplay'); // Assume there's an element displaying the date
  const config = { childList: true, subtree: true }; // Configuration for the observer

  const callback = function() {
    console.log("Date has changed! Updating...");
    // Logic to update highlighted date
  };

  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
}

// Initialize the observer on page load
window.onload = observeDateChange;

1. 这篇关于在 JavaScript 中管理日期更改的文章的灵感来自于各种 JavaScript 论坛和 Web 开发博客的示例和讨论。有关 JavaScript 日期操作的更多详细信息，请参阅 MDN Web 文档 - 日期对象 。
2. 要探索 setTimeout 和 setInterval 在处理日期更改等事件中的用法，您可以访问关于 JavaScript.info - 计时器 。
3. 要进一步探索 JavaScript 中的时区处理和夏令时调整，请查看以下文章 Moment.js 文档 。