Как создавать часы “countdown” для того, чтобы он закончился в час страны в специфическом средстве?

Чтобы этого добиваться нужно принимать во внимание концепции bГЎsicos управления данных о типе Date в Javascript.

ее documentaciГіn мы имеем:

Верьте в инстанцию Объекта Date, который представляет мгновение во времени в формате, независимом от платформы. Объекты Date содержат один Number, который представляет миллисекунды, прошедшие с 1 января 1970 всеобщее скоординированное время.

Это значит, что независимо от платформы и от часовой зоны той же самой, объекта Date tendrГЎ всегда та же хранившаяся стоимость, уже был создан в JapГіn, или в MГ©xico или в любом другом месте.

Однако, когда мы разворачиваем Вашу стоимость, того же самого serГЎ показанный в часовой зоне и в формате платформы, в которой он развернутый.

Давайте Видеть пример:

let fecha = new Date('December 17, 1995 03:24:00');
console.log(fecha);
console.log(fecha.toString());
console.log(fecha.toUTCString()); // Sun, 17 Dec 1995 02:24:00 GMT

.as-console-wrapper { max-height: 100% !important; top: 0; }

в зависимости от часовой зоны, в которой находится клиент, который выполняет этот рукописный шрифт, показанную стоимость serГЎn различные. Я разместил стоимость, которую он показывает мне в моей команде для выпяченной Гєltima, и состоит в том, что моя часовая настоящая зона - GMT+1. Следовательно возвращенная стоимость toUTCString() restarГЎ час в произведенную в моей системе, когда поверит дата.

Сейчас ты хочешь произвести объект Date, которые соответствовали бы с датой:

31 октября 2020 в 0:00:00 местное время JapГіn

Pero в тебе cГіdigo ты пишешь:

var countDownDate = new Date("Oct 31, 2020 12:00:00").getTime();
var fecha = new Date("Oct 31, 2020 12:00:00");

console.log(countDownDate);
console.log(fecha.toUTCString()); // Sat, 31 Oct 2020 11:00:00 GMT

.as-console-wrapper { max-height: 100% !important; top: 0; }

Снова я поместил в комментарий стоимость, возвращенную в моей системе возвращенной даты используя toUTCString(). Ты можешь наблюдать, что дата - 31 октября 2020, но час - 11:00:00 GMT.

Ввиду того, что часовая зона JapГіn - GMT+9, мы должны складывать его 9 часов в эту стоимость знать час JapГіn, что соответствует с 11 часами GMT. Что говорит нам, что эта созданная дата соответствует в 20:00:00 час JapГіn. Что отличается от того, что ты желаешь.

ВїCГіmo произвел дату с местным временем одного paГ-s X?

Строитель объекта Date получает различные parГЎmetros:

• Без parГЎmetros: созданный объект представляет дату и местное время системы.
• Стоимость времени или nГєmero timestamp: стоимость сообщила, что он представляет количество миллисекунд, прошедших с 1 января 1970 в 0:00:00, всеобщее скоординированное время (GMT)
• Цепь timestamp: цепь, которая представляет дату, определенную в формате, распознанном из-за mГ©todo Date.parse().
• типа Стоимости даты и часа как индивидуальные компоненты: Данный по крайней мере aГ±o и в месяце, этот способ использовать Date(), производит объект, который представляет дату и часы, перемещенный как индивидуальные компоненты, если опускает какой-либо (различный aГ±o и месяц), стандартная настройка serГЎn все 0, кроме dГ, - в который tomarГЎ стоимость 1.

Уже мы знаем возможных parГЎmetros, который получает строитель Date(), и этих нас интересует especГ-ficamente Цепь timestamp.

мы Можем использовать один из следующих 2 форматов estГЎndar:

1. IETF-compliant RFC 2822
2. ISO8601

Si мы читаем тщательно ее documentaciГіn обоих, видим, что возможно показывать часовую зону в цепи.

Ввиду того, что JapГіn он использует часовую зону GMT+9 , форму, в которой мы можем писать цепь показывая часовую зону JapГіn следующей serГ-:

1. IETF-compliant RFC 2822: 'October 31, 2020 00:00:00 GMT+09:00'
2. ISO8601: '2020-10-31T00:00:00.000+09:00'

Давайте Видеть пример:

//IETF-compliant RFC 2822: `'October 31, 2020 00:00:00 GMT+09:00'`
const rfc2822Date = new Date('October 31, 2020 00:00:00 GMT+09:00');
//ISO8601: `'2020-10-31T00:00:00.000+09:00'`
const iso8601Date = new Date('2020-10-31T00:00:00.000+09:00');

console.log('Fecha usando RFC2822:');
console.log(rfc2822Date.toString());
console.log('Fecha usando ISO8601:');
console.log(iso8601Date.toString());

console.log('¿Son la misma fecha?');
console.log(rfc2822Date.getTime() === iso8601Date.getTime());

.as-console-wrapper { max-height: 100% !important; top: 0; }

Сейчас уже мы умеем устанавливать дату и час согласно часовой зоне в especГ-fico, остается реализовывать часы счета atrГЎs.

В cГіdigo твоего вопроса ценит в себе, что ты хочешь показать dГ-туз, часы, минуты и секунды, тогда мы должны вычислять эту стоимость и обновлять каждый некий интервал.

мы Будем выбирать интервал 1 секунды, чтобы реализовывать ее actualizaciГіn, а именно, каждая 1 секунда мы реализуем cГЎlculo dГ-эксперта, часы, минуты и секунды.

Для этого мы будем создавать одну funciГіn, что реализовал выражения cГЎlculos, нас назовет ее updateClock(). Наши

funciГіn recibirГЎ дата, что мы создали заблаговременно, как parГЎmetro и calcularГЎ количество dГ-эксперта, часы, минуты и остальные секунды для того, чтобы система, в которой выполняют script, достигла вышеупомянутой даты.

cГЎlculo простой, используя mГ©todo getTime() из Объекта Date, мы можем вычислять различие между датой настоящей системы и датой, которую мы вычислили как будущая.

Это различие приходит выраженная в миллисекундах, следовательно мы должны вычислять cuГЎntos миллисекунды они равняются одному dГ - в, в час, в минуту и в секунду.

• Один dГ - в equivale в 86400000 миллисекунд.
• час равняется 3600000 миллисекундам.
• Минута равняется 60000 миллисекундам.
• Секунда равняется 1000 миллисекундам.

, Следовательно чтобы запускать наши часы, мы должны вычислять эту стоимость начиная с различия между миллисекундами настоящей даты системы и даты lГ-mite.

Из этой формы:

const topDate = new Date('October 31, 2020 00:00:00 GMT+09:00');

const updateClock = (date) => {
  if(!date) return;
  let end = date.getTime();
  let now = Date.now();
  let diff = end - now;
  let days = Math.floor(diff / 86400000);
  diff = diff % 86400000
  let hours = Math.floor(diff / 3600000);
  diff = diff % 3600000;
  let minutes = Math.floor(diff / 60000);
  diff = diff % 60000;
  let seconds = Math.floor(diff / 1000);
  console.log(`Tiempo estimado: ${days} días, ${hours} horas, ${minutes} minutos, ${seconds} segundos.`);
}

updateClock(topDate);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Уже мы имеем наша funciГіn, сейчас sГіlo мы должны создавать подходящий интервал и каждый раз, когда она pГЎgina он был загружен он работает наша funciГіn и обновляет поля, для этого мы должны создавать структуру HTML, что contendrГЎ наши часы.

const topDate = new Date('October 31, 2020 00:00:00 GMT+09:00');

const updateClock = (date) => {
  if(!date) return;
  let end = date.getTime();
  let now = Date.now();
  let diff = end - now;
  let days = Math.floor(diff / 86400000);
  diff = diff % 86400000
  let hours = Math.floor(diff / 3600000);
  diff = diff % 3600000;
  let minutes = Math.floor(diff / 60000);
  diff = diff % 60000;
  let seconds = Math.floor(diff / 1000);
  document.getElementById('days').innerHTML = days;
  document.getElementById('hours').innerHTML = hours;
  document.getElementById('minutes').innerHTML = minutes;
  document.getElementById('seconds').innerHTML = seconds;
}

// se llama a la función una vez para que pinte el resultado inmediatamente
updateClock(topDate);
// se hace uso de setInterval para cambiar el contador cada 1 segundo
setInterval(updateClock, 1000, topDate)

.container {
  text-align: center;
  }

<div id="clock" class="clock">
  <div class="container">
    Días: <span id="days"></span>, Horas: <span id="hours"></span>, Minutos: <span id="minutes"></span>, Segundos: <span id="seconds"></span>
  </div>
</div>

С этим уже у тебя есть способ вычислять время, которого нет для того, чтобы был выполнен крайний срок.

Только faltarГ, - чтобы проверять, когда дата выполняется, чтобы скрывать часы.

мы можем делать Это используя класс CSS, чтобы это скрывать или даже можем перемещать это от DOM: часы в обратном счете sГіlo - vГЎlido пока существовало что-то, что можно было считать.

, Чтобы это перемещать от DOM, мы используем mГ©todo Node.removeChild(), и с этим мы покончим.

UsarГ© пример bГЎsico и счетчик 6 секунд, чтобы показывать cГіmo, перемещает элемент DOM:

const topDate = new Date(Date.now() + 6000);

const updateClock = (date) => {
  if(!date) return;
  let end = date.getTime();
  let now = Date.now();
  let diff = end - now;
  if(diff < 0) { // <- si el reloj ya mostró todo en cero, lo remuevo del DOM
    clearInterval(interval);
    let visor = document.getElementById('visor');
    document.getElementById('clock').removeChild(visor);
  } else {
    let days = Math.floor(diff / 86400000);
    diff = diff % 86400000
    let hours = Math.floor(diff / 3600000);
    diff = diff % 3600000;
    let minutes = Math.floor(diff / 60000);
    diff = diff % 60000;
    let seconds = Math.floor(diff / 1000);
    document.getElementById('days').innerHTML = days;
    document.getElementById('hours').innerHTML = hours;
    document.getElementById('minutes').innerHTML = minutes;
    document.getElementById('seconds').innerHTML = seconds;
  }
}

// se llama a la función una vez para que pinte el resultado inmediatamente
updateClock(topDate);
// se hace uso de setInterval para cambiar el contador cada 1 segundo
const interval = setInterval(updateClock, 1000, topDate)

.container {
  text-align: center;
  }
.visor {
  
}

<div id="clock" class="clock">
  <div id="visor" class="container">
    Días: <span id="days"></span>, Horas: <span id="hours"></span>, Minutos: <span id="minutes"></span>, Segundos: <span id="seconds"></span>
  </div>
</div>

Надеялся, что с этим ты имеешь немного mГЎs ясно cГіmo, добиваться цели.

Я это поместил cГіdigo mГЎs понятно возможно. Включая пара console.log, чтобы показывать начала алгоритма и Вашего функционирования каждая секунда.

CronometroCuentaRegresiva('31 Oct 2020 00:00:00 GMT+0900', 'tableroCuentaRegresiva');

function CronometroCuentaRegresiva(fechaFinal, id) {
	console.log("Iniciando");

	var fechaFin = new Date(fechaFinal);

	//Definiendo tiempos:
	var _segundos = 1000; //Unidad basada en mili-segundos.
	var _minutos = _segundos * 60;
	var _horas = _minutos * 60;
	var _dias = _horas * 24;

	var cronometro;

	function mostrarRemanente() {
		console.log("actualizando cada segundo");
		var ahora = new Date();
		var diferencia = fechaFin - ahora;
		if (diferencia < 0) {

			clearInterval(cronometro);
			document.getElementById(id).innerHTML = '¡Ya pasó!';

			return;
		}
    
                //Estas son las variables del resultado
		var dias = Math.floor(diferencia / _dias);
		var horas = Math.floor((diferencia % _dias) / _horas);
		var minutos = Math.floor((diferencia % _horas) / _minutos);
		var segundos = Math.floor((diferencia % _minutos) / _segundos);

		document.getElementById(id).innerHTML = dias + ' dias ';
		document.getElementById(id).innerHTML += horas + ' horas ';
		document.getElementById(id).innerHTML += minutos + ' minutos ';
		document.getElementById(id).innerHTML += segundos + ' segundos';
	}

	//Aqui la magia del intervalo que estará ejecutándose cada segundo:
	cronometro = setInterval(mostrarRemanente, 1000);
}

<div id="tableroCuentaRegresiva">

</div>

BastarГ - в, с которым ты покажешь час JapГіn таким образом:

var countDownDate = new Date('October 31, 2020 12:00:00 GMT+09:00');
console.log('Hora en UTC:',countDownDate); 

, применившись GMT+09:00, (в случае JapГіn), Javascript имеет в виду часовое различие, и бухгалтер terminarГ - 31 октября в них 03:00 (час espaГ±ola).

Чтобы этого tendrГ-эксперт может добиваться sГіlo, что сравнивать даты в миллисекундах, tendrГ-схвати if (distance < 0), что менять это в это:

if (countDown === now) {
  // clearInterval
}

Я имею тебе хранилище, где он верит в счетчик к atrГЎs, это personalicГ© для того, чего ты требуешь, но объясняю это тебе, что немедленно

Хранилище находит в https://github.com/orta93/reactClock

Файл html, что включает хранилище, содержит зависимости jQuery и ее librerГ, - в который llamГ© reactClock, функционирует этой формы

<!--Agregar un div con data-date donde coloques la fecha objetivo-->
<!--El atributo data-time debe tener la hora-->
<!--El atributo data-type indica el valor que requieres (Dia = d, Hora = h, Minutos = i, Segundos = s) -->
<!--Si data-type está vacío se muestran todos los elementos d h i s-->
<!--data-tz contiene la zona que requieres, en este caso es Asia/Tokio,
tambien puede ir vacía y tomara la hora del server-->
<!--data-min es un arreglo de datos en el que indicas el tiempo minimo para mostrar,
en este caso coloque d:60, por lo que se esperará 60 días para mostrarlo,
la nomenclatura usada es la misma del atributo date-type-->
<div class="reactClock" data-date="2020-10-31" data-time="00:00" data-type="" data-tz="Asia/Tokyo" data-min="d:60"></div>