如何隐藏一个元素，在特定时区的时间通过后?(Javascript)

Question

我正在尝试隐藏/显示一个基于时间的元素。

唯一的问题是，无论时区如何，这都需要是。.

例如，如果我在纽约时间上午8点有一个事件，我如何在那个时间隐藏一个元素(无论用户位于何处)?

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

谢谢!

Answer 1

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

请记住，这只有在用户的时钟在他/她的设备上设置正确时才有效，否则你需要通过api获得当前时间(有一些免费的api可以为你做这件事，但如果你有一个服务器/主机，我建议为自己做一个来完成你的工作)

注释提供更多解释

// 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>