0

Estoy tratando de hacer una cuenta atrás en JS que lleva hasta un día y hora determinado. El problema es que, en América, por ejemplo, el horario es distinto, y la web no muestra la misma hora en España que allí. Me gustaría saber cómo solucionarlo. Este es el código que he usado:

var end = new Date('06/7/2020 5:00 PM');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
  var now = new Date();
  var distance = end - now;
  if (distance < 0) {

    clearInterval(timer);
    document.getElementById('countdown').innerHTML = '¡ES LA HORA!';

    return;
  }
  var days = Math.floor(distance / _day);
  var hours = Math.floor((distance % _day) / _hour);
  var minutes = Math.floor((distance % _hour) / _minute);
  var seconds = Math.floor((distance % _minute) / _second);

  if (days == 1) {
    document.getElementById('countdown').innerHTML = days + ' día, ';
  } else {
    document.getElementById('countdown').innerHTML = days + ' días, ';
  }
  if (hours == 1) {
    document.getElementById('countdown').innerHTML += hours + ' hora, ';
  } else {
    document.getElementById('countdown').innerHTML += hours + ' horas, ';
  }
  if (minutes == 1) {
    document.getElementById('countdown').innerHTML += minutes + ' minuto, ';
  } else {
    document.getElementById('countdown').innerHTML += minutes + ' minutos, ';
  }
  if (seconds == 1) {
    document.getElementById('countdown').innerHTML += seconds + ' segundo';
  } else {
    document.getElementById('countdown').innerHTML += seconds + ' segundos';
  }
}

timer = setInterval(showRemaining, 1000);
<!DOCTYPE html>
<html lang="es" dir="ltr">

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="countdown.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
  <link rel="icon" type="image/png" href="/favicon.png">
  <title>Próximamente</title>
</head>

<body style="background-color: rgb(26, 26, 26);">
  <div>
    <div id="countdown" style="color: white; font-family: 'Itim', cursive; text-align: center; font-size: 50px">

    </div>
  </div>
</body>

</html>
He estado probando pero no he encontrado ninguna solución por internet, y me gustaría no usar ninguna librería externa ni nada. ¿Hay alguna forma de arreglar ese problema usando este mismo código? Me gustaría que fuera este código, no ningún otro, sólo poderle añadir algo y que eso arreglara el problema. Saludos.

1
  • Creo que no. He seguido los pasos, he puesto GMT+01:00 (es el horario de España) y ahora me ha sumado una hora, así que ahora no da la hora correcta en España. @fredyfx
    – Tupi
    Commented el 4 jun. 2020 a las 15:26

1 respuesta 1

1

Lo único que debes hacer es cambiar tu fecha de inicio por la fecha en formato UTC en este caso quedaría de la siguiente forma:

var end = new Date(Date.UTC(2020,7,6,17,0));

Te anexo la documentación sobre Date.UTC() [Date UTC JavaScript]1

2
  • Muchísimas gracias, eso lo explica todo. Ahora lo entendí.
    – Tupi
    Commented el 4 jun. 2020 a las 15:34
  • eso justamente está bien detallado en las respuestas del enlace que pasé... En fin, me alegra que hayas podido resolver tu caso :D
    – fredyfx
    Commented el 4 jun. 2020 a las 15:45

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.