合并代码实现工作日指定时段可用、周末禁用按钮并弹窗提示

Hey there! Let's merge those two logic pieces into a clean, single solution that only lets users click the button on weekdays between 17:00 and 24:00 (UTC+8). We'll also add a clear prompt for anyone trying to click during restricted times.

Core Logic Breakdown #

First, let's map out what we need to accomplish:

• Fetch the current time in UTC+8 timezone to avoid local timezone mismatches
• Check if today is a weekend (Saturday or Sunday)
• For weekdays, verify the time falls between 17:00 (5 PM) and 24:00 (midnight)
• Toggle the button's enabled state based on these checks
• Add a click handler to show a friendly message when the button is disabled

Complete Implementation (Vanilla JavaScript) #

You can adapt this to frameworks like React/Vue easily—here's the full working code:

// Target your button element (replace with your button's actual ID)
const restrictedButton = document.getElementById('restricted-action-btn');

// Check if current time is within the allowed window
function isClickAllowed() {
  const now = new Date();
  const utc8Offset = 8; // UTC+8 timezone offset in hours
  // Convert current time to UTC+8
  const utc8Time = new Date(now.getTime() + utc8Offset * 60 * 60 * 1000);
  
  // Get day of week (0 = Sunday, 6 = Saturday)
  const dayOfWeek = utc8Time.getUTCDay();
  // Check if it's a weekday (Monday to Friday: 1-5)
  const isWeekday = dayOfWeek >= 1 && dayOfWeek <= 5;

  if (!isWeekday) return false;

  // Get current hour in UTC+8 (0-23)
  const currentHour = utc8Time.getUTCHours();
  // Allow from 17:00 (5 PM) to 23:59 (11:59 PM) — 24:00 is equivalent to 00:00 next day
  return currentHour >= 17 && currentHour <= 23;
}

// Update button state and click behavior
function updateButtonStatus() {
  const allowed = isClickAllowed();
  restrictedButton.disabled = !allowed;

  // Remove old click handler to avoid duplicates
  restrictedButton.removeEventListener('click', showRestrictionPrompt);

  if (!allowed) {
    // Add prompt handler for disabled clicks
    restrictedButton.addEventListener('click', showRestrictionPrompt);
  }
}

// Show message when disabled button is clicked
function showRestrictionPrompt(e) {
  e.preventDefault();
  alert('Sorry! This button is only available on weekdays between 5 PM and 12 AM (UTC+8).');
}

// Initialize button state when page loads
updateButtonStatus();

// Optional: Refresh state every minute to handle time transitions
setInterval(updateButtonStatus, 60 * 1000);

Key Details Explained #

• Timezone Accuracy: We convert the current time to UTC+8 by adding the offset in milliseconds, then use getUTCDay() and getUTCHours() to avoid issues with local timezone settings.
• Weekday Check: getUTCDay() returns 0 for Sunday and 6 for Saturday—we validate the day falls between 1-5 (Monday to Friday).
• Dynamic Updates: The button state refreshes on page load and every minute, so it automatically enables/disables if the time crosses into/out of the allowed window while the page is open.
• User-Friendly Feedback: We only attach the prompt handler when the button is disabled, so users get clear context about why they can't click.

Just replace 'restricted-action-btn' with your button's actual ID, and tweak the alert message to fit your needs!

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