timers and date

avatar
unknown
javascript
10 months ago
5.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; /* Устанавливаем размер шрифта 18 пикселей */
        margin-top: -5vh}
        #time-info{margin-left: 120vh; color: #ffdb5d;
            margin-top: 5vh;}
    </style>
</head>
<body>
    
       <div id="current-info" class="small-text"></div>
    <div id="timers"></div>
     <div id="time-info"></div> 
     <!-- Добавляем новый div для текущей информации -->

    <script>
    const months = ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"];
const weekdays = ["вс", "пн", "вт", "ср", "чт", "пт", "сб"];
const monthsfull = [
  "января",
  "февраля",
  "марта",
  "апреля",
  "мая",
  "июня",
  "июля",
  "августа",
  "сентября",
  "октября",
  "ноября",
  "декабря"
];
const daysweek = ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"];
const countDownDates = [
    new Date("January 1, 2025 00:00: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>`;
        }
        return `<span style="color: ${days < 7 ? '#ff2c40' : 'lime'};">${days} ${declension(days, ['день', 'дня', 'дней'])}, ${hours} ${declension(hours, ['час', 'часа', 'часов'])}, ${minutes} ${declension(minutes, ['минута', 'минуты', 'минут'])}, ${seconds} ${declension(seconds, ['секунда', 'секунды', 'секунд'])} до ${dateString}.</span><br>`;
    }).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}
    `;

    // Вставляем строку в элемент с id 'time-info'
    document.getElementById('time-info').innerHTML = nowtimeinfoHTML;
}

// Обновляем время сразу при загрузке страницы
updateTime();

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