const form = document.getElementById('form'); const rentStartInput = document.getElementById('rent-start'); const rentStartTimeHoursInput = document.getElementById('rent-start-time-hours'); const rentStartTimeMinutesInput = document.getElementById('rent-start-time-minutes'); const rentOffInput = document.getElementById('rent-off'); const rentOffTimeHoursInput = document.getElementById('rent-off-time-hours'); const rentOffTimeMinutesInput = document.getElementById('rent-off-time-minutes'); const durationOutput = document.getElementById('duration'); const minDuration = 3; // минимальная продолжительность аренды в сутках const hoursOptions = [...Array(25).keys()].map(i => i.toString().padStart(2, '0')); const minutesOptions = ['00', '15', '30', '45']; const createElement = (element, item) => { const newElement = document.createElement(element); newElement.textContent = item; return newElement; }; const populateSelect = (select, options) => { options.forEach(option => { select.appendChild(createElement('option', option)); }); }; populateSelect(rentStartTimeHoursInput, hoursOptions); populateSelect(rentStartTimeMinutesInput, minutesOptions); populateSelect(rentOffTimeHoursInput, hoursOptions); populateSelect(rentOffTimeMinutesInput, minutesOptions); const calculateDuration = (rentStart, rentStartTime, rentOff, rentOffTime) => { const rentStartDate = new Date(rentStart); const rentStartTimeDate = new Date(); rentStartTimeDate.setHours(rentStartTime.hours, rentStartTime.minutes); const rentEndDate = new Date(rentOff); const rentEndTimeDate = new Date(); rentEndTimeDate.setHours(rentOffTime.hours, rentOffTime.minutes); const diff = Math.round((rentEndTimeDate - rentStartTimeDate) / (1000 * 60 * 60 * 24)); if (diff < minDuration) { return minDuration; } return diff; }; const updateDuration = (e) => { e.preventDefault(); const rentStart = rentStartInput.value; const rentStartTime = { hours: parseInt(rentStartTimeHoursInput.value), minutes: parseInt(rentStartTimeMinutesInput.value) }; const rentOff = rentOffInput.value; const rentOffTime = { hours: parseInt(rentOffTimeHoursInput.value), minutes: parseInt(rentOffTimeMinutesInput.value) }; if (!rentStart || !rentStartTime || !rentOff || !rentOffTime) { alert('Заполните все поля!'); return; } if (rentOff < rentStart) { alert('Дата окончания аренды не может быть меньше даты начала аренды!'); return; } const duration = calculateDuration(rentStart, rentStartTime, rentOff, rentOffTime); durationOutput.value = duration; }; form.addEventListener('submit', updateDuration);
Create
beautiful
websites
alive
with
Make
your
story
Step-by-Step
Previous Example / Next Example
ANIMATION DEMO PAGE
online stores
Animation
landing pages
Innovative and intuitive web animation tool in Zero Block on Tilda
Step-by-Step
Previous Example / Next Example
ANIMATION DEMO PAGE
Innovative and intuitive web animation tool in Zero Block on Tilda
Animation
Open this page on a large screen >1200px to see the animation
Скопируйте эту страницу, чтобы посмотреть как устроена анимация
Нажмите «Создать новую страницу» в личном кабинете Тильды. Пролистайте до конца список шаблонов и нажмите «Указать ID страницы». Введите номер шаблона, который вы видите справа. Создание страницы по номеру шаблона доступно на платных тарифах. Подробнее читайте в справочном центре.
Copy this sample to see how animation is set up
Click “Create new page” in Tilda dashboard, scroll the list of templates all the way down and click “Enter Template ID”. Paste the Template ID from this page. Learn more in our Help Center.
Made on
Tilda