Tengo una página web que muestra el clima según la entrada del usuario, también tengo un elemento HTML de tiempo. Los datos se inicializarán usando JS. Este es el código de los Elementos HTML:
HTML:
<div class="content"> <div class="date-time"> <h1 class="time"> 00:00:00 </h1> <h2 class="date"> </h2> </div> </div>JavaScript:
setInterval(() => { // 12Hr Format For Hour function twilveFormat(hour) { if (hour >= 13) { return hour % 12; } else { return hour; } } function isAM_PM(hour) { if (hour >= 12) { return "AM"; } else { return "PM"; } } const days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursay", "Friday", "Saturday" ]; const months = [ "Jan", "Feb", "March", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec" ]; const time = new Date(); const date = time.getDate(); const month = time.getMonth(); const day = time.getDay(); const min = time.getMinutes(); const sec = time.getSeconds(); const hour = time.getHours(); const hourIn12HR = twilveFormat(hour); const isAM = isAM_PM(hour); // Time document.querySelector( ".content .date-time .time" ).innerHTML = `${hourIn12HR}:${min}:${sec} <span id='AM_PM'>${isAM}</span>`; // Date document.querySelector( ".content .date-time .date" ).innerHTML = `${days[day]}, ${date} ${months[month]}`; }, 1000);Yo uso la API de Openweathermap:
const res = await fetch( `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${this.apiKey}` ); const data = await res.json(); this.display(data);Lo que quiero es que cada vez que el usuario ingrese el nombre de una ciudad usando el siguiente código de entrada, la zona horaria cambie a la ciudad que el usuario seleccionó. La API de Openweathermap tiene un atributo de zona horaria pero no sé cómo usarlo
Entrada HTML:
<div action="" class="myform"> <input type="" class="search" placeholder="Search"> <button class="myBtn"><i class="fas fa-search"></i></button> </div>Para lograr su objetivo, primero debe obtener la propiedad de zona horaria y analizarla según sus necesidades. Al observar la API de OpenWeatherMap, puedo ver que la respuesta contiene una propiedad de "zona horaria" que le brinda el cambio en segundos desde la hora UTC para esa ciudad. Entonces, ¿qué puede intentar? Puede obtener la hora actual en su ubicación usando
var x = new Date();A continuación, agrega la cantidad de segundos que tiene la propiedad de zona horaria. (por supuesto, primero debe analizarlo en un número) así:
x.setSeconds(x.getSeconds + {timezoneParsed});Eso le devolverá la hora actual de la ciudad como número de tics. A continuación, simplemente pone la hora actual en un formato legible por humanos, por ejemplo:
x.toISOString();