• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

251
Vistas
¿Cómo ocultar un elemento, después de que pase el tiempo en una zona horaria específica? (Javascript)

Estoy tratando de ocultar/mostrar un elemento basado en el tiempo.

Lo único es que esto debe ser independientemente de la zona horaria .

Por ejemplo, si tengo un evento a las 8 AM hora de Nueva York, ¿cómo puedo ocultar un elemento a esa hora (sin importar dónde se encuentre el usuario)?

Estoy agregando este sandbox inicial: https://codesandbox.io/s/ny-event-time-rp34ml?file=/src/index.js

¡Gracias!

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Debe tomar la hora actual, luego convertirla a su zona horaria objetivo (Nueva_York), luego verificar si la hora actual del usuario está en su rango de eventos y...

Tenga en cuenta que esto solo funciona si los relojes del usuario en su dispositivo están configurados correctamente. De lo contrario, debe obtener la hora actual a través de una API (hay algunas API gratuitas que hacen esto por usted, pero si tiene un servidor/host, yo sugiera hacer uno para usted mismo para hacer su trabajo)

Más explicaciones proporcionadas como comentarios.

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

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda