Countdown Timer in JavaScript
- سُلَيْمَان بْن دَاوُوْد
- Oct 21, 2022
- 2 min read
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div class="counter-sec">
<div class="counter-heading">
</div>
<div class="counter-box">
<div id="timer">
<div id="clockdiv">
<div class="counter_col">
<span class="months">0</span>
<div class="smalltext">Months</div>
</div>
<div class="counter_col">
<span class="days">0</span>
<div class="smalltext">days</div>
</div>
<div class="counter_col">
<span class="hours">0</span>
<div class="smalltext">Hours</div>
</div>
<div class="counter_col">
<span class="minute">0</span>
<div class="smalltext">Minutes</div>
</div>
<div class="counter_col">
<span class="seconds">0</span>
<div class="smalltext">Secs</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.counter-sec {
position: absolute;
background: #fff;
border: 1px solid #000;
width: 100%;
max-width: 354px;
border-bottom: none;
}
#clockdiv {
display: flex;
}
#clockdiv .counter_col {
display: block;
border-right: 1px solid #000;
text-align: center;
width: 25%;
}
</style>
<script type="text/javascript">
window.addEventListener("load", function(){
if(document.querySelector(".counter-sec")){
function getInput() {
const input = "08/01/2023";
//const input = bump_data.countdownDate; use this value with timezone dynamic from backend
const deadline = new Date(input);
return deadline;
}
function leapYear(year) {
if (year % 4 !== 0) {
if (year % 400 !== 0 && year % 100 !== 4) {
return false;
}
return false;
}
return true;
}
const deadline = getInput();
if (deadline < Date.now()) {
alert("Sorry; we don't count up from a past event");
} else {
console.log(deadline.getMonth());
const timerId = setInterval(() => {
const now = new Date().getTime();
const timeDiff = deadline - now;
let february = 0;
if (leapYear(deadline.getFullYear())) {
february = 29;
} else {
february = 28;
}
const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
let months = Math.floor(days / daysInMonth[deadline.getMonth()]);
days %= daysInMonth[deadline.getMonth()];
const currentDate = new Date();
if (currentDate.getMonth() < deadline.getMonth() && currentDate.getDate() === deadline.getDate()) {
days = 0;
const monthDiff = deadline.getMonth() - currentDate.getMonth();
months = monthDiff;
} else if (currentDate.getDate() < deadline.getDate() && currentDate.getMonth() === deadline.getMonth()) {
const daysDiff = deadline.getDate() - currentDate.getDate();
days = daysDiff;
months = 0;
} else if (currentDate.getMonth() < deadline.getMonth() && currentDate.getDate() < deadline.getDate()) {
const daysDiff = deadline.getDate() - currentDate.getDate();
const monthsDiff = deadline.getMonth() - currentDate.getMonth();
days = daysDiff;
months = monthsDiff;
}
const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
d1 = new Date(deadline.getFullYear(), deadline.getMonth()+1, deadline.getDate());
d2 = new Date(currentDate.getFullYear(), currentDate.getMonth()+1, currentDate.getDate());
diff = new Date(
d1.getFullYear()-d2.getFullYear(),
d1.getMonth()-d2.getMonth(),
d1.getDate()-d2.getDate()
);
document.getElementsByClassName("days")[0].textContent = diff.getDate();
document.getElementsByClassName("months")[0].textContent = months;
document.getElementsByClassName("hours")[0].textContent = hours;
document.getElementsByClassName("minute")[0].textContent = minutes;
document.getElementsByClassName("seconds")[0].textContent = seconds;
if (timeDiff < 0) {
clearInterval(timerId);
const event = document.getElementById("event");
document.getElementById("is-it-time").textContent = `${event} is here!`;
document.getElementsByClassName("months")[0].textContent = "0";
document.getElementsByClassName("days")[0].textContent = "0";
document.getElementsByClassName("hours")[0].textContent = "0";
document.getElementsByClassName("minute")[0].textContent = "0";
document.getElementsByClassName("seconds")[0].textContent = "0";
}
}, 1000);
}
}
})
</script>
</body>
</html>
Comments