如何用ES6原生JS实现时区匹配办公时段显示Div

Got it, let's convert your jQuery-based office hours logic to clean ES6 vanilla JavaScript step by step. Since you've already confirmed the office_hours array (7 items for each day of the week) exists, we'll focus on the core functionality: syncing with Vancouver time, checking if we're within open hours, and toggling your target element.

First, we need to get the current time in Vancouver's time zone (Pacific Time, which observes DST). Vanilla JS makes this straightforward with the Date constructor and time zone parameter:

// Create a Date object set to Vancouver's local time
const vancouverTime = new Date(new Date().toLocaleString("en-US", { timeZone: "America/Vancouver" }));

Next, pull out the current day of the week and the exact hour/minute from the Vancouver time object. Note: JavaScript's getDay() returns 0 for Sunday, 1 for Monday, ..., 6 for Saturday—adjust this index to match how your office_hours array is ordered (e.g., if your array starts with Monday, you might need to shift the index by 1).

// Get current day (0 = Sunday, 1 = Monday, ..., 6 = Saturday)
const currentDay = vancouverTime.getDay();
// Get current hour (24-hour format) and minute
const currentHour = vancouverTime.getHours();
const currentMinute = vancouverTime.getMinutes();

Grab the corresponding entry from your office_hours array, then split the open and close time strings into numeric hours and minutes for comparison:

// Fetch today's hours (adjust the index if your array starts with a different day)
const todayHours = office_hours[currentDay];

// Split open/close times into hours and minutes (assuming format like "09:00")
const [openHour, openMinute] = todayHours.open.split(':').map(Number);
const [closeHour, closeMinute] = todayHours.close.split(':').map(Number);

Convert all times to total minutes since midnight—this makes comparing times way simpler than dealing with hours and minutes separately:

// Calculate total minutes for current time, open time, and close time
const currentTotalMinutes = currentHour * 60 + currentMinute;
const openTotalMinutes = openHour * 60 + openMinute;
const closeTotalMinutes = closeHour * 60 + closeMinute;

// Check if current time falls between open and close
const isOfficeOpen = currentTotalMinutes >= openTotalMinutes && currentTotalMinutes <= closeTotalMinutes;

Finally, use vanilla DOM methods to show or hide your element. Replace #open-status-element with your actual element selector (you can use document.querySelector() if you need a more flexible selector):

// Get the element you want to show/hide
const openStatusElement = document.getElementById('open-status-element');

// Update visibility based on office status
if (isOfficeOpen) {
  openStatusElement.classList.add('visible'); // Use a CSS class for better styling control
  // Or if you prefer inline styles: openStatusElement.style.display = 'block';
} else {
  openStatusElement.classList.remove('visible');
  // Or: openStatusElement.style.display = 'none';
}

Bonus: Handle Edge Cases #

• If your office hours ever cross midnight (e.g., open until 2 AM), you'll need to adjust the logic to account for the next day.
• Add a check to ensure todayHours.open and todayHours.close exist before parsing them, just to be safe.

内容的提问来源于stack exchange，提问作者Lieutenant Dan