Я стараюсь создавать обратный счет и хочу, чтобы он кончился в час страны специфическим средством в этом случае, хочу, чтобы закончило 31 октября 2020 в 0:00:00 местное время Японии
Это мой код:
var countDownDate = new Date("Oct 31, 2020 12:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (days === 60){//Si ya pasaron 60 días se muestra el contador
$('.text').remove();//elimina un div en especifico que muestra un texto para mostrar la cuenta atrás
document.getElementById('days').innerHTML = days;
document.getElementById('hors').innerHTML = hours;
document.getElementById('minutes').innerHTML = minutes;
document.getElementById('seconds').innerHTML = seconds;
}else{ //esta parte es para pruebas
}
if (distance < 0) {
clearInterval(x);
//si finaliza la cuenta atras aqui se puede ocultar el contador
}
}, 2000);
Кто-то знает, как делать это?
Чтобы этого добиваться нужно принимать во внимание концепции 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:
timestamp
: стоимость сообщила, что он представляет количество миллисекунд, прошедших с 1 января 1970 в 0:00:00, всеобщее скоординированное время (GMT) timestamp
: цепь, которая представляет дату, определенную в формате, распознанном из-за mГ©todo Date.parse()
. Date()
, производит объект, который представляет дату и часы, перемещенный как индивидуальные компоненты, если опускает какой-либо (различный aГ±o и месяц), стандартная настройка serГЎn все 0, кроме dГ, - в который tomarГЎ стоимость 1. Уже мы знаем возможных parГЎmetros, который получает строитель Date()
, и этих нас интересует especГ-ficamente Цепь timestamp
.
мы Можем использовать один из следующих 2 форматов estГЎndar:
Si мы читаем тщательно ее documentaciГіn обоих, видим, что возможно показывать часовую зону в цепи.
Ввиду того, что JapГіn он использует часовую зону GMT+9 , форму, в которой мы можем писать цепь показывая часовую зону JapГіn следующей serГ-:
'October 31, 2020 00:00:00 GMT+09:00'
'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Г - в, в час, в минуту и в секунду.
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>