В этой статье будет очень интересно, будет рассказываться как сделать JavaScript обратный отсчет времени до даты, при этом мы сделаем не только до дня, а ещё добавим отсчёт времени, плоть до минуты.
Ещё в конце будет можно скачать этот скрипт обратного отсчета времени на javascript для своего сайта, ещё можете посмотреть статью Как сделать таймер на JavaScript, в ней вы сделаете самый обычный таймер, без отсчёта до дней.
HTML:
Для начала, как всегда начнём с HTML, тут всё просто.
1 2 | <div id="timer"></div> <script src="script.js"></script> |
Как можете видеть это обычный HTML документ, единственное, мы создаём в нём div элемент, с классом timer, туда будем выводить значение нашего таймера.
JavaScript:
Вот теперь самое главное, это сама логика программы, а точнее теперь делаем скрипт на JavaScript, но сначала посмотрим логику программы.
Также, если вы ни разу не работали с временем на JavaScript, то посмотрите этот сайт.
Логика программы:
Суть того, как будет работать наша программа в том, что мы будем брать настоящие время и вычитать его из той даты, до которой нам нужно посмотреть отсчёт, к примеру, дата следующего первая сентября и т.д..
Всё это должно работать в интервале в одну секунду, и так каждый раз программа будет брать настоящие время и вычитать его из конечной даты, пока результат не будет равен или меньше нуля, после таймер останавливается.
Таким образом у нас должен получится таймер на сайт javascript.
Код программы:
Теперь займёмся кодом программы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Берём элемент для вывода таймера let timer_show = document.getElementById("timer"); // Функция для вычисления разности времени function diffSubtract(date1, date2) { return date2 - date1; } // Массив данных о времени let end_date = { "full_year": "1970", // Год "month": "01", // Номер месяца "day": "01", // День "hours": "00", // Час "minutes": "00", // Минуты "seconds": "00" // Секунды } // Строка для вывода времени let end_date_str = `${end_date.full_year}-${end_date.month}-${end_date.day}T${end_date.hours}:${end_date.minutes}:${end_date.seconds}`; |
Это начало программы, давайте разберём его. Сначала мы создаём переменную которая хранит в себе элемент, в который будем отображать наш отсчёт.
Потом идёт функция в которой будем вычитать время, из заданного нами времени, вычитает настоящие время.
Дальше идёт JSON массив или ассоциативный массив, в котором мы как раз и храним данные до куда нам нужно отсчитывать наш таймер, как можете заметить у меня это девятое Мая, потом создаём строку формата YYYY-MM-DDTHH:mm:ss, но вместо букв подставляем значения из массива.
Сам таймер:
Теперь пришло время сделать сам таймер в интервале.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // Запуск интервала таймера timer = setInterval(function () { // Получение времени сейчас let now = new Date(); // Получение заданного времени let date = new Date(end_date_str); // Вычисление разницы времени let ms_left = diffSubtract(now, date); // Если разница времени меньше или равна нулю if (ms_left <= 0) { // То // Выключаем интервал clearInterval(timer); // Выводим сообщение об окончание alert("Время закончилось"); } else { // Иначе // Получаем время зависимую от разницы let res = new Date(ms_left); // Делаем строку для вывода let str_timer = `${res.getUTCFullYear() - 1970}.${res.getUTCMonth()}.${res.getUTCDate() - 1} ${res.getUTCHours()}:${res.getUTCMinutes()}:${res.getUTCSeconds()}`; // Выводим время timer_show.innerHTML = str_timer; } }, 1000) |
Теперь разберём код, в начале мы берём настоящие время, потом получаем время до которого нужно сделать отсчёт, дальше вычитаем в нашей функции из назначенного времени, настоящие время, функция возвращает миллисекунды разности этого вычитания.
Проверяем, если миллисекунд меньше или равно нулю, то выключаем интервал и выводим сообщение, что время закончилось.
Если условие не срабатывает, то из разности получаем время, дальше идёт самое интересное, мы создаём строку для вывода таймера, разберём его по подробнее.
- res.getUTCFullYear() — Получаем год, но в нашем коде вычитаем 1970, это нужно для того, чтобы отсчёт начинался с нулевого года, так как, по умолчанию год начинается 1970 года.
- res.getUTCMonth() — Просто получаем номер месяца.
- res.getUTCDate() — Получаем день, но из него вычитаем один, это нужно для того, чтобы не учитывался сегодняшней день, если этого не сделать, то дата всегда будет на один день больше, даже тогда, когда остались считанные минуты.
- res.getUTCHours() — Получаем час.
- res.getUTCMinutes() — Получаем минуты.
- res.getUTCSeconds() — Получаем секунды.
Можете заметить что выводим время по UTC. Дальше выводим эту строку таймер.
Тест программы:
Программу мы делать закончили, теперь покажу как она работает. У меня сейчас 23:19, я ставлю время на 23:20.
1 2 3 4 5 6 7 8 | let end_date = { "full_year": "2020", "month": "06", "day": "07", "hours": "23", "minutes": "20", "seconds": "00" } |
Вот результат, когда таймер закончился.
Как видите оно вывело сообщение в браузере, что время закончилось.
Таким же образом, вы можете выводить сделать счетчик дней до нового года на js, вот как это делается.
1 2 3 4 5 6 7 8 | let end_date = { "full_year": "2021", "month": "01", "day": "01", "hours": "00", "minutes": "00", "seconds": "00" } |
Я написал дату до следующего нового года, в моём случае это новый год в 2021, так как эта стать вышла в 2020 году, вот результат.
Как видите, на момент когда пишется эта статья, осталось до нового года 11 месяцев, 18 дней, 0 часов, 32 минуты и 46 секунд.
Таким образом, вы можете делать до любой даты.
Вывод:
В этой статье мы сделали на JavaScript обратный отсчет времени до даты, до любой даты, также можете проверить на сколько хорошо работает это программа сравнив его данные на сайте fincalculator.ru.
Рекомендации:
Пожалуй эта программа идеальна, в неё можно только добавить возможно назначать время с формы или со сервера.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 5,00
Загрузка...