Показать сообщение отдельно
  #1 (permalink)  
Старый 22.12.2024, 17:25
Аспирант
Отправить личное сообщение для Feex Посмотреть профиль Найти все сообщения от Feex
 
Регистрация: 30.12.2015
Сообщений: 86

Таймер обратного отсчета до события - нужна правка
Здравствуйте. Есть таймер считающий с определенной даты и времени, до определенной даты и времени с выводом информации по окончании события. Тут всё нормально.
Сам таймер выводи инфу в формате 0:23:5:3 (дни, часы, мин. сек)- игнорируется "0" если часы, минуты, секунды <10.
Не найдется ли тут человек, который это исправит? Чтобы вывод выглядел так: 0:23:05:03
Заранее благодарен.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src=""></script>
<link type="text/css" rel="stylesheet" href=""/>
<style type="text/css">
#progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left, #0099ff 20%, #fffb00 40%, #fffb00 30%, #fffb00 20%, #0099ff 60%, #0099ff);
    background-size: 400% 100%;
    background-position: 100% center;
    animation: slide 2s infinite;
    border-radius: 50px;
}
#progress {
    height: 100%;
    background-color: #66FF33;
    width: 0%;
}
#progress-bar {
    background-color: transparent;
    position: relative;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
    width: 60%;
    height: 24px;
    background-color: rgba(0,0,0,.5);
    margin-bottom: 30px;
    margin: 17px auto;
    border: 3px solid #000;
    border-radius: 18px;
}
</style>
</head>
<body>
<center>
<div id="countdown-text" style="font-size: 30px;padding: 40px 20px 20px 20px;"></div>
        <div id="progress-bar">
            <div id="progress"></div>
        </div>
       <div id="countdown" style="font-size: 70px;font-family: arial black;"></div>

<script>
        document.addEventListener('DOMContentLoaded', function() {
    const countdownDate = new Date("February 21, 2025 12:00:00").getTime();
    const progressBar = document.getElementById("progress");
    const countdownText = document.getElementById("countdown-text");
    const countdownElement = document.getElementById("countdown");

    const updateCountdown = function() {
        const now = new Date().getTime();
        const distance = countdownDate - now;
        const totalDistance = countdownDate - new Date("December 1, 2024 04:00:00").getTime();

        const progress = Math.min(Math.floor(((totalDistance - distance) / totalDistance) * 100), 100);
        progressBar.style.width = progress + "%";

        if (distance <= 0) {
            countdownText.innerHTML = "Chapter 6 Season 1 is <span style='color: rgb(255, 230, 0); font-weight: bold;'>100%</span> finished. <span style='color: rgb(255, 230, 0); font-weight:bold;'>0</span> days left.";
            countdownElement.innerHTML = "SEASON 1 IS OVER";
            clearInterval(interval);
            return;
        }

        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        let countdownString = "";
        countdownString += days + " : ";
        countdownString += hours + " : ";
        countdownString += minutes + " : " + seconds;

        countdownText.innerHTML = "Chapter 6 Season 1 is <span style='color: deepskyblue; font-weight: bold;'>" + progress + "%</span> finished. <span style='color: deepskyblue; font-weight: bold;'>" + days + "</span> days left.";
        countdownElement.innerHTML = countdownString;
    };

    // Initial update
    updateCountdown();

    // Update every second
    const interval = setInterval(updateCountdown, 1000);
});

    </script>
</center>
</body>
</html>

Последний раз редактировалось рони, 22.12.2024 в 18:43.
Ответить с цитированием