timer and date js
<!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: 25px; /* Устанавливаем размер шрифта 18 пикселей */ margin-top: -5vh} </style> </head> <body> <div id="current-info" class="small-text"></div> <div id="timers"></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 = ` Время: ${currentTime}<br> Сегодня: ${currentDay} ${currentMonth} ${currentYear} года — ${currentDayOfWeek}<br> Неделя года: ${weekNumber}<br> День года: ${dayOfYear} `; document.getElementById('current-info').innerHTML = currentInfoHTML; } // Обновление таймеров каждую секунду setInterval(updateTimers, 1000); updateTimers(); // Первоначальный вызов </script> </body> </html>
Leave a Comment