如何在特定时区的时间过去后隐藏元素？ (Javascript)

Question

我正在尝试 hide/display 基于时间的元素。

唯一的是这需要不考虑时区。

例如，如果我在纽约时间上午 8 点有一个活动，我如何在那个时间隐藏一个元素（无论用户位于何处）？

我正在添加这个起始沙盒： https://codesandbox.io/s/ny-event-time-rp34ml?file=/src/index.js

谢谢！

Answer 1

您需要获取当前时间，然后将其转换为您的目标时区(New_York)，然后检查用户的当前时间是否在您的事件范围内并且...

Keep in mind that this only works if user's clocks on him/her device is set correctly, Otherwise you need to get current time through an api (there are some free APIs that does this for you but if you have a server/host, I suggest making one for yourself to get your job done)

More explanation provided as comments

// function to convert current user local time to another time zone
function getTime(timeZone, date = new Date()) {
  return new Date(
    date.toLocaleString("en-US", {
      timeZone,
    })
  );
}
const nyc = getTime("America/New_York"); // current New_York date
// get current day/month/year
const [month, day, year] = nyc.toLocaleString("en-US").split(", ")[0].split("/");

// get current time
const currentTime = getTime("America/New_York").getTime();
/* you can change the event time here
    e.g. if you wanna event start at 10:05:30 pm try this
    const eventTime = new Date(+year, month - 1, +day, 22, 05, 30).getTime(); */
const eventTime = new Date(+year, month - 1, +day, 8, 0, 0).getTime();
const beforeEvent = eventTime - 900000; // 15 min before event start
const afterEvent = eventTime + 3600000; // 60 min after event start

const beforeElement = document.querySelector(".before");
const startElement = document.querySelector(".start");
const afterElement = document.querySelector(".after");
// hides all elements by default
[beforeElement, startElement, afterElement].forEach((e) => (e.style.display = "none"));

// do stuff before event starts
if (currentTime < beforeEvent) {
  // display beforeElement before event starts
  beforeElement.style.display = "block";
}
// do stuff during event
if (currentTime >= beforeEvent && currentTime <= afterEvent) {
  // display startElement during event
  startElement.style.display = "block";
}
// do stuff after event ends
if (currentTime > afterEvent) {
  // display afterElement after event ends
  afterElement.style.display = "block";
}

<p class="before">Before Event</p>
<p class="start">Event Started</p>
<p class="after">After Event</p>

如何在特定时区的时间过去后隐藏元素？ (Javascript)

How to hide an element, after time in a specific time zone pass? (Javascript)

javascript