Универсальный таймер с сохранением прогресса
Модификация для создания таймера обратного отсчёта в Tilda, которая работает даже при перезагрузке страницы или повторном посещении. Таймер может отображать дни, часы, минуты и секунды — вы сами выбираете, какие единицы времени использовать!
Инструкция по установке
Добавьте необходимые текстовые элементы в Zero Block
Назначьте им классы:
Вставьте код в блок T123
.t-timer__days — для дней
.t-timer__hours — для часов
.t-timer__minutes — для минут
.t-timer__seconds — для секунд
1.
2.
3.
Настройте начальное время в переменных
4.
Опубликуйте страницу
5.
<!-- meloddy.design - Универсальный таймер обратного отсчёта с сохранением прогресса -->
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Настройки таймера
    const startDays = 2;    // начальное количество дней
    const startHours = 24;  // начальное количество часов
    const startMinutes = 0; // начальное количество минут
    const startSeconds = 0; // начальное количество секунд

    let savedTime = localStorage.getItem('timerState');
    let totalSeconds;

    if (savedTime) {
        totalSeconds = parseInt(savedTime, 10);
    } else {
        totalSeconds = 
            startDays * 86400 + 
            startHours * 3600 + 
            startMinutes * 60 + 
            startSeconds;
        localStorage.setItem('timerState', totalSeconds);
    }

    const daysElement = document.querySelector('.t-timer__days .tn-atom');
    const hoursElement = document.querySelector('.t-timer__hours .tn-atom');
    const minutesElement = document.querySelector('.t-timer__minutes .tn-atom');
    const secondsElement = document.querySelector('.t-timer__seconds .tn-atom');
    
    function updateTimer() {
        const days = Math.floor(totalSeconds / 86400);
        const hours = Math.floor((totalSeconds % 86400) / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        if (daysElement) daysElement.textContent = String(days).padStart(2, '0');
        if (hoursElement) hoursElement.textContent = String(hours).padStart(2, '0');
        if (minutesElement) minutesElement.textContent = String(minutes).padStart(2, '0');
        if (secondsElement) secondsElement.textContent = String(seconds).padStart(2, '0');
        
        if (totalSeconds > 0) {
            totalSeconds--;
            localStorage.setItem('timerState', totalSeconds);
        } else {
            clearInterval(timerInterval);
            localStorage.removeItem('timerState');
        }
    }
    
    let timerInterval;

    if (daysElement || hoursElement || minutesElement || secondsElement) {
        if (totalSeconds > 0) {
            timerInterval = setInterval(updateTimer, 1000);
            updateTimer();
        } else {
            console.log('Таймер уже завершен');
        }
    } else {
        console.error('Элементы таймера не найдены');
    }
});
</script>
Копировать код
  
document.addEventListener('DOMContentLoaded', () => {
// Настройки таймера
const startDays = 2; // начальное количество дней
const startHours = 24; // начальное количество часов
const startMinutes = 0; // начальное количество минут
const startSeconds = 0; // начальное количество секунд
let savedTime = localStorage.getItem('timerState');
let totalSeconds;
if (savedTime) {
totalSeconds = parseInt(savedTime, 10);
} else {
totalSeconds =
startDays * 86400 +
startHours * 3600 +
startMinutes * 60 +
startSeconds;
localStorage.setItem('timerState', totalSeconds);
}
const daysElement = document.querySelector('.t-timer__days .tn-atom');
const hoursElement = document.querySelector('.t-timer__hours .tn-atom');
const minutesElement = document.querySelector('.t-timer__minutes .tn-atom');
const secondsElement = document.querySelector('.t-timer__seconds .tn-atom');
function updateTimer() {
const days = Math.floor(totalSeconds / 86400);
const hours = Math.floor((totalSeconds % 86400) / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
if (daysElement) daysElement.textContent = String(days).padStart(2, '0');
if (hoursElement) hoursElement.textContent = String(hours).padStart(2, '0');
if (minutesElement) minutesElement.textContent = String(minutes).padStart(2, '0');
if (secondsElement) secondsElement.textContent = String(seconds).padStart(2, '0');
if (totalSeconds > 0) {
totalSeconds--;
localStorage.setItem('timerState', totalSeconds);
} else {
clearInterval(timerInterval);
localStorage.removeItem('timerState');
}
}
let timerInterval;
if (daysElement || hoursElement || minutesElement || secondsElement) {
if (totalSeconds > 0) {
timerInterval = setInterval(updateTimer, 1000);
updateTimer();
} else {
console.log('Таймер уже завершен');
}
} else {
console.error('Элементы таймера не найдены');
}
});
 
Код модификации
Код модификации
Копировать код
<!-- meloddy.design - Универсальный таймер обратного отсчёта с сохранением прогресса -->
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Настройки таймера
    const startDays = 2;    // начальное количество дней
    const startHours = 24;  // начальное количество часов
    const startMinutes = 0; // начальное количество минут
    const startSeconds = 0; // начальное количество секунд

    let savedTime = localStorage.getItem('timerState');
    let totalSeconds;

    if (savedTime) {
        totalSeconds = parseInt(savedTime, 10);
    } else {
        totalSeconds = 
            startDays * 86400 + 
            startHours * 3600 + 
            startMinutes * 60 + 
            startSeconds;
        localStorage.setItem('timerState', totalSeconds);
    }

    const daysElement = document.querySelector('.t-timer__days .tn-atom');
    const hoursElement = document.querySelector('.t-timer__hours .tn-atom');
    const minutesElement = document.querySelector('.t-timer__minutes .tn-atom');
    const secondsElement = document.querySelector('.t-timer__seconds .tn-atom');
    
    function updateTimer() {
        const days = Math.floor(totalSeconds / 86400);
        const hours = Math.floor((totalSeconds % 86400) / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        if (daysElement) daysElement.textContent = String(days).padStart(2, '0');
        if (hoursElement) hoursElement.textContent = String(hours).padStart(2, '0');
        if (minutesElement) minutesElement.textContent = String(minutes).padStart(2, '0');
        if (secondsElement) secondsElement.textContent = String(seconds).padStart(2, '0');
        
        if (totalSeconds > 0) {
            totalSeconds--;
            localStorage.setItem('timerState', totalSeconds);
        } else {
            clearInterval(timerInterval);
            localStorage.removeItem('timerState');
        }
    }
    
    let timerInterval;

    if (daysElement || hoursElement || minutesElement || secondsElement) {
        if (totalSeconds > 0) {
            timerInterval = setInterval(updateTimer, 1000);
            updateTimer();
        } else {
            console.log('Таймер уже завершен');
        }
    } else {
        console.error('Элементы таймера не найдены');
    }
});
</script>
Пример работы модификации
Предложение действует еще
00
:
:
:
00
00
00
Made on
Tilda