如何使用JavaScript实现每日下午3点自动重置的时区适配倒计时功能

Got it, let's build this daily countdown that resets at 3 PM local time and keeps looping—perfect for your same-day shipping reminder. I've updated the original example with the logic you need plus some user-friendly tweaks:

HTML (Display Element) #

<div id="shipping-countdown"></div>

JavaScript Implementation #

// Helper to get the next 3 PM target time (adapts to user's local timezone)
function getNextThreePM() {
  const now = new Date();
  const target = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 15, 0, 0);
  
  // If current time is already past 3 PM, set target to tomorrow's 3 PM
  if (now > target) {
    target.setDate(target.getDate() + 1);
  }
  
  return target.getTime();
}

// Initialize the countdown target
let countDownDate = getNextThreePM();

// Update countdown every second
const countdownInterval = setInterval(() => {
  const now = new Date().getTime();
  const distance = countDownDate - now;

  // Calculate days/hours/minutes/seconds left
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  const countdownEl = document.getElementById("shipping-countdown");

  // Handle countdown expiration
  if (distance < 0) {
    // Reset target to next day's 3 PM
    countDownDate = getNextThreePM();
    // Show a clear message before switching back to countdown
    countdownEl.innerHTML = "当日发货截止，明日倒计时已启动！";
    // Revert to countdown display after 2 seconds
    setTimeout(() => {
      countdownEl.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s 内下单可享受次日发货服务`;
    }, 2000);
  } else {
    // Display active countdown with shipping reminder
    countdownEl.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s 内下单可享受当日发货服务`;
  }
}, 1000);

Key Details & Explanations #

• Timezone Auto-Adaptation: The native Date object automatically uses the user's local timezone, so 3 PM will always correspond to their local time—no extra setup required.
• Daily Reset Logic: The getNextThreePM() function checks if the current time has passed 3 PM. If yes, it sets the target to the next day at 3 PM, ensuring the countdown always points to the nearest cutoff.
• Continuous Looping: When the timer hits 0, it doesn't stop—instead, it instantly resets to the next day's cutoff and keeps going. A brief message lets users know the same-day window has closed before resuming the countdown.
• User-Centric Messaging: The display text directly links the timer to the shipping benefit, making it clear why the countdown matters to your customers.

Quick Testing Tip #

Want to test the expiration flow fast? Temporarily change the target hour to new Date().getHours() and minutes to new Date().getMinutes() + 1—this will set the cutoff to one minute from now. Don't forget to switch it back to 15 (3 PM) when you're done!

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