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>