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);
Minimalist urban clothing for men made only from natural fabrics and materials
Open this page on desktop >1200px to see animation
Previous Example / Next Example
ANIMATION DEMO PAGE
NEW COLLECTION
NEW COLLECTION
NEW COLLECTION
NEW COLLECTION
NEW COLLECTION
NEW COLLECTION
NEW COLLECTION
NEW COLLECTION
NEW COLLECTION
NEW COLLECTION
Create your own style
Hat
Black color, 100 % wool
$ 19
T-shirt
Color of mustard, 100 % cotton
$ 29
Shorts
Black color, 100 % cotton
$ 49
NATURAL MATERIALS ONLY
NATURAL MATERIALS ONLY
NATURAL MATERIALS ONLY
NATURAL MATERIALS ONLY
NATURAL MATERIALS ONLY
NATURAL MATERIALS ONLY
Create your own style
Hat
Black color, 100 % wool
$ 19
T-shirt
Color of mustard, 100 % cotton
$ 29
Shorts
Black color, 100 % cotton
$ 49
NATURAL MATERIALS ONLY
NATURAL MATERIALS ONLY
NATURAL MATERIALS ONLY
NATURAL MATERIALS ONLY
NATURAL MATERIALS ONLY
NATURAL MATERIALS ONLY
Pants
Black and red color, 100 % cotton
$ 49
T-shirt
White color, 100 % cotton
$ 29
ВИДЕО УРОК
Как сделать эффект бегущей строки с помощью пошаговой анимации
Скопируйте эту страницу, чтобы посмотреть как устроена анимация
Нажмите «Создать новую страницу» в личном кабинете Тильды. Пролистайте до конца список шаблонов и нажмите «Указать 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