timerPassedDays

avatar
unknown
javascript
10 months ago
6.6 kB
3
Indexable
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Таймеры до 2025 года</title>
    <style>
        @font-face {
            font-family: 'LCD Nova';
            src: url('fonts/LCDNova.ttf') format('truetype');
        }

        body {
            background-color: black;
            color: lime;
            font-family: 'LCD Nova', sans-serif;
            font-size: 33px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin-left: 10vh;
            margin-top: 5vh;
        }
        #timers { margin-top: 5vh; }
        .small-text {
            font-size: 28px;
            margin-top: -5vh;
        }
        #time-info { margin-left: 120vh; color: #ffdb5d; margin-top: 2vh; }
    </style>
</head>
<body>
    
    <div id="current-info" class="small-text"></div>
    <div id="timers"></div>
    <div id="time-info"></div> 

    <script>
        const months = ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"];
        const weekdays = ["вс", "пн", "вт", "ср", "чт", "пт", "сб"];
        const monthsfull = [
            "января", "февраля", "марта", "апреля", "мая", "июня", 
            "июля", "августа", "сентября", "октября", "ноября", "декабря"
        ];
        const daysweek = ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"];
        const countDownDates = [
            new Date(" January 1, 2025, 00:00:00"),
            new Date("February 1, 2025 18:03:00"),
            new Date("March 8, 2025 00:00:00"),
            new Date("March 25, 2025 00:00:00"),
            new Date("April 24, 2025 22:15:00"),
            new Date("October 23, 2025 19:05:00"),
            new Date("December 13, 2025 08:15:00"),
        ];

        function declension(number, titles) {
            return titles[(number % 10 === 1 && number % 100 !== 11) ? 0 : (number % 10 >= 2 && number % 10 <= 4 && (number % 100 < 10 || number % 100 >= 20)) ? 1 : 2];
        }

        function isLeapYear(year) {
            return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
        }

        function updateTimers() {
            const now = Date.now();
            let timersHTML = countDownDates.map((targetDate, index) => {
                const timeRemaining = targetDate - now;
                const [days, hours, minutes, seconds] = [
                    Math.floor(timeRemaining / (1000 * 60 * 60 * 24)),
                    Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
                    Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60)),
                    Math.floor((timeRemaining % (1000 * 60)) / 1000)
                ];
                const dateString = `${targetDate.getDate()} ${monthsfull[targetDate.getMonth()]} ${targetDate.getFullYear()} (${weekdays[targetDate.getDay()]})`;

                             if (timeRemaining < 0) {
                    countDownDates[index] = new Date(targetDate.getTime() + (isLeapYear(targetDate.getFullYear() + 1) ? 366 : 365) * 24 * 60 * 60 * 1000);
                    return `Время вышло для ${dateString}!<br>`;
                }
// Вычисляем количество дней, прошедших с предыдущей даты
const previousDate = new Date(targetDate.getTime() - (isLeapYear(targetDate.getFullYear()) ? 366 : 365) * 24 * 60 * 60 * 1000);
const daysPassed = Math.floor((now - previousDate) / (1000 * 60 * 60 * 24));

// Формируем строку с количеством прошедших дней, если больше одного
let timerString = '';
if (daysPassed > 0) {
    timerString += `<span style="color: #9f9a8d; font-size:21px">(прошло: ${daysPassed} ${declension(daysPassed, ['день', 'дня', 'дней'])}) </span><br>`;
}
// Формируем строку с таймером
timerString += `<span style="color: ${days < 7 ? '#ff2c40' : 'lime'};">${days} ${declension(days, ['день', 'дня', 'дней'])}, ${hours} ${declension(hours, ['час', 'часа', 'часов'])}, ${minutes} ${declension(minutes, ['минута', 'минуты', 'минут'])}, ${seconds} ${declension(seconds, ['секунда', 'секунды', 'секунд'])} до ${dateString}.</span><br>`;

                return timerString;
            }).join('');
            document.getElementById('timers').innerHTML = timersHTML;
            updateCurrentInfo();
        }

        function updateCurrentInfo() {
            const now = new Date();
            const currentDay = now.getDate(), currentMonth = monthsfull[now.getMonth()], currentYear = now.getFullYear(), currentDayOfWeek = daysweek[now.getDay()];
            const currentTime = now.toTimeString().split(' ')[0];
            const weekNumber = Math.ceil((now - new Date(currentYear, 0, 1)) / (1000 * 60 * 60 * 24 * 7));
            const dayOfYear = Math.floor((now - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24));
            
            const currentInfoHTML = `
                Сегодня: ${currentDay} ${currentMonth} ${currentYear} года — ${currentDayOfWeek}<br>
                Неделя года: ${weekNumber}<br>
                День года: ${dayOfYear}
            `;
            document.getElementById('current-info').innerHTML = currentInfoHTML;
        }

        // Функция для обновления времени
        function updateTime() {
            const currentTime = new Date().toLocaleTimeString();
            const nowtimeinfoHTML = `Время: ${currentTime}`;
            document.getElementById('time-info').innerHTML = nowtimeinfoHTML;
        }

        // Обновляем время сразу при загрузке страницы
        updateTime();
        // Устанавливаем интервал обновления времени каждую секунду (1000 миллисекунд)
        setInterval(updateTime, 1000);
        // Обновление таймеров каждую секунду
        setInterval(updateTimers, 1000);
        updateTimers(); // Первоначальный вызов
    </script>    
</body>
</html>
Editor is loading...
Leave a Comment