Блог

Я пытаюсь закодировать таймер обратного отсчета в ванильном Javascript. Ниже приведен код:-

 var futureDate = new Date("oct 31,2021 10:00:00").getTime();
var currentDate = new Date().getTime();
var diffTime = futureDate - currentDate;
console.log(diffTime);
var days = Math.floor(diffTime / (1000* 24* 60*60));
console.log(days);
var hours = Math.floor(diffTime / (1000 * 60 * 60));
console.log(hours);
var minutes = Math.floor(diffTime / (1000 * 60));
console.log(minutes);
var seconds = Math.floor(diffTime / (1000));
console.log(seconds);
 

Ниже приведен вывод кода, предоставленного в консоли.

Этот вывод соответствует изображению ниже

Но я не могу понять конкретный код, написанный в w3schools, как выделено синим цветом на изображении ниже

Я не могу понять разницу между 2 написанными кодами?

Date.getTime() возвращает количество миллисекунд, прошедших с эпохи Unix (1900-01-01 00:00:00).

Когда вы вычитаете время между 2 датами, вы получите разницу во времени в миллисекундах. В своем коде вы показываете

1. Общее количество часов между датами
2. Общее количество минут между датами
3. Общее количество секунд между датами

Давайте возьмем в качестве примера количество часов, код, написанный в w3schools, берет остаток от деления разницы во времени на количество миллисекунд в день. Таким образом, вы получите разницу во времени менее чем за 24 часа и сможете использовать ее для расчета разницы во времени в часах.

Сделайте то же самое в течение минут и секунд, и вы получите тот же результат, написанный в w3schools

 var futureDate             = new Date( "oct 31,2021 10:00:00" ).getTime();
var currentDate            = new Date().getTime();
var timeDiffInMilliseconds = futureDate - currentDate;
var millisecondsPerSecond  = 1000;
var millisecondsPerMinute  = millisecondsPerSecond * 60; // 1000 * 60
var millisecondsPerHour    = millisecondsPerMinute * 60; // 1000 * 60 * 60
var millisecondsPerDay     = millisecondsPerHour   * 24; // 1000 * 60 * 60 * 24

console.log( 'timeDiffInMilliseconds: '   timeDiffInMilliseconds );

var days = Math.floor( timeDiffInMilliseconds / millisecondsPerDay );
console.log( 'days: '   days );

var timeDiffInLessThan1Day = timeDiffInMilliseconds % millisecondsPerDay;
var hours                  = Math.floor( timeDiffInLessThan1Day / millisecondsPerHour );
console.log( 'hours: '   hours );

var timeDiffInLessThan1Hour = timeDiffInMilliseconds % millisecondsPerHour;
var minutes                 = Math.floor( timeDiffInLessThan1Hour / millisecondsPerMinute );
console.log( 'minutes: '   minutes );

var timeDiffInLessThan1Minute = timeDiffInMilliseconds % millisecondsPerMinute;
var seconds                   = Math.floor( timeDiffInLessThan1Minute / millisecondsPerSecond );
console.log( 'seconds: '   seconds ); 

Хорошо, сначала вам нужно понять основную концепцию свиданий vanilla javascript .

1 секунда = 1000 миллисекунд
1 минута = 60 секунд
1 час = 60 минут
1 день = 24 часа
Math.floor просто используется для возврата максимально возможного округленного значения.

Теперь перейдем к вашему вопросу,

 var distance = countDownDate - now;
 

Эта строка в основном принимает два целых числа даты в формате UNIX и дает вам разницу в виде метки времени unix. Поэтому , как только вы поймете разницу, вам нужно будет выяснить, сколько hours их, minutes и days из чего они состоят, и это все.

Мы используем простые формулы, о которых я упоминал выше, чтобы определить именно это. 1000 * 60 * 60 * 24 равно 1 дню, поэтому мы делим общую разницу в двух датах на the 1 day , чтобы получить общее количество дней со следующей строкой:

 var days = Math.floor(distance / (1000 * 60 * 60 * 24));
 

Аналогично, с помощью приведенного ниже кода мы берем разницу в двух датах и сначала получаем из нее количество дней, а затем, сколько бы времени ни осталось, мы используем это время для дальнейшего вычисления часов, разделив значение на (1000 * 60 * 60) .

 var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
 

В следующей строке сначала вычисляется количество часов на основе разницы, а затем все, что остается, затем делится на минуту, чтобы получить общее количество оставшихся минут. Аналогично, концепция будет применена для расчета секунд.

 var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));