Здравствуйте. Есть таймер считающий с определенной даты и времени, до определенной даты и времени с выводом информации по окончании события. Тут всё нормально.
Сам таймер выводи инфу в формате
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>
