Hobo
Привет! Для того, чтобы найти количество дней между двумя датами на JavaScript, можно использовать объект Date и метод getTime(). Вот пример кода:
|
1 2 3 4 5 6 |
const date1 = new Date('2022-04-15'); const date2 = new Date('2023-05-01'); const diffTime = Math.abs(date2.getTime() - date1.getTime()); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); console.log(diffDays); // 381 |
В этом примере мы создаем два объекта Date для даты начала и конца периода, затем находим разницу между ними в миллисекундах с помощью метода getTime(). Далее мы делим это значение на количество миллисекунд в одном дне и округляем результат до целого числа с помощью метода Math.ceil().
Содержание:
А как оформить это визуально на сайте? Есть несколько способов отобразить количество дней между датами на сайте, в зависимости от того, какой дизайн вы хотите использовать. Один из способов — это просто вывести число на странице, например, так:
|
1 |
<p>Количество дней между датами: <span id="days"></span></p> |
Здесь мы создали абзац и вставили пустой спан с идентификатором «days», который мы будем заполнять с помощью JavaScript.
А вот как можно заполнить этот спан с помощью ранее написанного кода:
|
1 2 3 4 5 6 |
const date1 = new Date('2022-04-15'); const date2 = new Date('2023-05-01'); const diffTime = Math.abs(date2.getTime() - date1.getTime()); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); document.getElementById('days').textContent = diffDays; |
Здесь мы находим элемент на странице с помощью document.getElementById(), затем устанавливаем его текстовое содержимое равным diffDays.
Кроме того, вы можете использовать другие способы отображения этой информации, например, создать анимированный счётчик или график, который показывает количество дней визуально. Всё зависит от того, какой эффект вы хотите достичь на веб-странице.
Как отобразить подсчёт на сайте
Ну а как же всё-таки реализовать на веб-странице онлайн-подсчёт дней между датами? Для реализации данного функционала можно использовать HTML, CSS и JavaScript. Вот простой пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <title>Подсчет дней между датами</title> <style> input[type="date"] { font-size: 18px; padding: 10px; margin: 10px; } button { font-size: 18px; padding: 10px; margin: 10px; } #result { font-size: 24px; padding: 20px; margin: 20px; background-color: #f0f0f0; border-radius: 10px; } </style> </head> <body> <h1>Подсчет дней между датами</h1> <label for="start">Дата начала:</label> <input type="date" id="start"> <label for="end">Дата окончания:</label> <input type="date" id="end"> <button onclick="calculate()">Подсчитать</button> <div id="result"></div> <script> function calculate() { const startDate = new Date(document.getElementById('start').value); const endDate = new Date(document.getElementById('end').value); const diffTime = Math.abs(endDate.getTime() - startDate.getTime()); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); document.getElementById('result').textContent = `Количество дней между датами: ${diffDays}`; } </script> </body> </html> |
Здесь мы создали форму с двумя полями для выбора даты и кнопкой «Подсчитать». При нажатии на кнопку запускается функция calculate(), которая находит разницу между выбранными датами и выводит результат на странице в элементе с идентификатором «result».
В CSS мы просто определили стили для элементов формы и результата. Посмотрите на итог проделанной работы ниже.
See the Pen
days by Artem (@HoboBo)
on CodePen.
Как добавить анимацию для вывода результата
Вышеуказанный пример можно дополнить и улучшить, например, добавив проверку на правильность выбранных дат или создав анимацию для отображения результата. Для создания анимации для отображения результата на странице можно использовать CSS. Вот пример того, как можно добавить анимацию при выводе результата:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html> <head> <title>Подсчет дней между датами</title> <style> input[type="date"] { font-size: 18px; padding: 10px; margin: 10px; } button { font-size: 18px; padding: 10px; margin: 10px; } #result { font-size: 24px; padding: 20px; margin: 20px; background-color: #f0f0f0; border-radius: 10px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } #result.show { opacity: 1; transform: translateY(0); } </style> </head> <body> <h1>Подсчет дней между датами</h1> <label for="start">Дата начала:</label> <input type="date" id="start"> <label for="end">Дата окончания:</label> <input type="date" id="end"> <button onclick="calculate()">Подсчитать</button> <div id="result"></div> <script> function calculate() { const startDate = new Date(document.getElementById('start').value); const endDate = new Date(document.getElementById('end').value); const diffTime = Math.abs(endDate.getTime() - startDate.getTime()); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); const resultElement = document.getElementById('result'); resultElement.textContent = `Количество дней между датами: ${diffDays}`; resultElement.classList.add('show'); } </script> </body> </html> |
Здесь мы добавили стили для элемента с идентификатором «result», которые определяют начальное состояние элемента (opacity: 0; transform: translateY(20px)) и анимацию его появления (opacity и transform с помощью transition).
В JavaScript мы добавили строку resultElement.classList.add(‘show’), которая добавляет класс «show» к элементу «result» после того, как результат был подсчитан. Класс «show» определен в CSS и изменяет стиль элемента таким образом, чтобы он стал видимым и переместился на своё место (opacity: 1; transform: translateY(0)).
Вот что в результате мы получим:
See the Pen
Untitled by Artem (@HoboBo)
on CodePen.
Проверка на правильность ввода дат
Для добавления проверки на правильность выбранных дат можно использовать JavaScript. Вот пример, как это можно сделать:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!DOCTYPE html> <html> <head> <title>Подсчет дней между датами</title> <style> input[type="date"] { font-size: 18px; padding: 10px; margin: 10px; } button { font-size: 18px; padding: 10px; margin: 10px; } #result { font-size: 24px; padding: 20px; margin: 20px; background-color: #f0f0f0; border-radius: 10px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } #result.show { opacity: 1; transform: translateY(0); } .error { color: red; font-size: 16px; margin-top: 5px; } </style> </head> <body> <h1>Подсчет дней между датами</h1> <label for="start">Дата начала:</label> <input type="date" id="start"> <label for="end">Дата окончания:</label> <input type="date" id="end"> <button onclick="calculate()">Подсчитать</button> <div id="result"></div> <div id="error-start" class="error"></div> <div id="error-end" class="error"></div> <script> function calculate() { const startDate = new Date(document.getElementById('start').value); const endDate = new Date(document.getElementById('end').value); const today = new Date(); const errorStart = document.getElementById('error-start'); const errorEnd = document.getElementById('error-end'); if (startDate > today) { errorStart.textContent = 'Дата начала не может быть в будущем'; errorEnd.textContent = ''; return; } if (endDate > today) { errorStart.textContent = ''; errorEnd.textContent = 'Дата окончания не может быть в будущем'; return; } if (startDate >= endDate) { errorStart.textContent = ''; errorEnd.textContent = 'Дата окончания должна быть позже даты начала'; return; } const diffTime = Math.abs(endDate.getTime() - startDate.getTime()); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); const resultElement = document.getElementById('result'); resultElement.textContent = `Количество дней между датами: ${diffDays}`; resultElement.classList.add('show'); errorStart.textContent = ''; errorEnd.textContent = ''; } </script> </body> </html> |
Здесь мы добавили три блока if для проверки выбранных дат на корректность. Если дата начала или окончания находится в будущем, выводится соответствующее сообщение об ошибке. Если дата окончания находится до или на дате начала, также выводится сообщение об ошибке.
Также мы добавили два блока div для вывода сообщений об ошибках и стили для этих блоков. Если при проверке выбранных дат была найдена ошибка, соответствующее сообщение выводится в блоке div с помощью свойства textContent. Если ошибок нет, сообщения об ошибках очищаются.
Если все проверки пройдены успешно, результат подсчёта выводится на странице с помощью анимации, как в предыдущем случае. Посмотрите, как это выглядит в приведённом ниже примере.
See the Pen
Untitled by Artem (@HoboBo)
on CodePen.
Кстати, возможно вам будет интересно посмотреть, как сделать простой калькулятор на сайте. Там есть пример реализации кода.
Видео
Всем WEB!
