Perusahaan-perusahaan besar biasanya 1 bulan sebelum launching atau bahkan lebih sudah mengumumkan kepada publik di website bisa dalam bentuk video, gambar, bahkan ada dengan countdown timer. Countdown juga sering dipakai untuk menyambut pergantian tahun diakhir tahun menymbut tahun baru, ada juga yang pakai untuk ucapan ulang tahun.
Saat ini saya akan membahas bagaimana cara membuat countdown timer menggunakan javascript?
Siapkan kode html seperti berikut
<div class="countdown">
<div class="time">
<span id="days">00</span>
<span>days</span>
</div>
<div class="semicolon">:</div>
<div class="time">
<span id="hours">00</span>
<span>hours</span>
</div>
<div class="semicolon">:</div>
<div class="time">
<span id="minutes">00</span>
<span>minutes</span>
</div>
<div class="semicolon">:</div>
<div class="time">
<span id="seconds">00</span>
<span>seconds</span>
</div>
</div>
Pada kode html diatas telah diberi id untuk days, hours, minutes, dan seconds yang akan diupdate nilainya ketika ada perubahan dari timer sehingga pada website countdown berjaln dengan baik. Bagian ini akan dilakukan menggunakan DOM javascript. Berikut kode javascriptnya.
function getCounter() {
var countDownDate = new Date("Aug 11, 2021 22:00:00").getTime();
var x = setInterval(function () {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var textDays = document.getElementById("days");
var textHours = document.getElementById("hours");
var textMinutes = document.getElementById("minutes");
var textSeconds = document.getElementById("seconds");
textDays.innerHTML = days < 10 ? "0" + days : days;
textHours.innerHTML = hours < 10 ? "0" + hours : hours;
textMinutes.innerHTML = minutes < 10 ? "0" + minutes : minutes;
textSeconds.innerHTML = seconds < 10 ? "0" + seconds : seconds;
if (distance < 0) {
clearInterval(x);
}
}, 1000);
}
Hasilnya akan seperti berikut.
Selanjutnya agar terlihat rapi, beri sedikit sentuhan styling css seperti kode berikut.
.countdown {
margin-bottom: 40px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
@media only screen and (max-width: 1024px) {
.countdown {
justify-content: center;
}
}
.countdown .time {
display: flex;
flex-direction: column;
justify-content: start;
}
.countdown .time:not(:last-child) {
margin-right: 16px;
}
.countdown .time #days,
.countdown .time #hours,
.countdown .time #minutes,
.countdown .time #seconds,
.countdown .time .semicolon {
font-family: Samsung Sharp Sans;
font-style: normal;
font-weight: bold;
letter-spacing: 0.3px;
}
@media only screen and (min-width: 1024px) {
.countdown .time #days,
.countdown .time #hours,
.countdown .time #minutes,
.countdown .time #seconds,
.countdown .time .semicolon {
font-size: 72px;
line-height: 91px;
}
}
@media only screen and (max-width: 1024px) {
.countdown .time #days,
.countdown .time #hours,
.countdown .time #minutes,
.countdown .time #seconds,
.countdown .time .semicolon {
font-size: 40px;
line-height: 50px;
text-align: center;
}
}
.countdown .time span {
font-family: Samsung Sharp Sans;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 15px;
text-align: center;
letter-spacing: 0.3px;
align-self: center;
}
.countdown .semicolon {
margin-right: 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
font-family: Samsung Sharp Sans;
font-style: normal;
font-weight: bold;
letter-spacing: 0.3px;
}
@media only screen and (min-width: 1024px) {
.countdown .semicolon {
font-size: 72px;
line-height: 91px;
}
}
@media only screen and (max-width: 1024px) {
.countdown .semicolon {
font-size: 40px;
line-height: 50px;
text-align: center;
}
}
Maka hasilnya seperti berikut.
Berikut kode secara lengkapnya.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>countdown</title>
<link href="//fonts.cdnfonts.com/css/samsung-sharp-sans" rel="stylesheet" />
<style>
.countdown {
margin-bottom: 40px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
@media only screen and (max-width: 1024px) {
.countdown {
justify-content: center;
}
}
.countdown .time {
display: flex;
flex-direction: column;
justify-content: start;
}
.countdown .time:not(:last-child) {
margin-right: 16px;
}
.countdown .time #days,
.countdown .time #hours,
.countdown .time #minutes,
.countdown .time #seconds,
.countdown .time .semicolon {
font-family: Samsung Sharp Sans;
font-style: normal;
font-weight: bold;
letter-spacing: 0.3px;
}
@media only screen and (min-width: 1024px) {
.countdown .time #days,
.countdown .time #hours,
.countdown .time #minutes,
.countdown .time #seconds,
.countdown .time .semicolon {
font-size: 72px;
line-height: 91px;
}
}
@media only screen and (max-width: 1024px) {
.countdown .time #days,
.countdown .time #hours,
.countdown .time #minutes,
.countdown .time #seconds,
.countdown .time .semicolon {
font-size: 40px;
line-height: 50px;
text-align: center;
}
}
.countdown .time span {
font-family: Samsung Sharp Sans;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 15px;
text-align: center;
letter-spacing: 0.3px;
align-self: center;
}
.countdown .semicolon {
margin-right: 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
font-family: Samsung Sharp Sans;
font-style: normal;
font-weight: bold;
letter-spacing: 0.3px;
}
@media only screen and (min-width: 1024px) {
.countdown .semicolon {
font-size: 72px;
line-height: 91px;
}
}
@media only screen and (max-width: 1024px) {
.countdown .semicolon {
font-size: 40px;
line-height: 50px;
text-align: center;
}
}
</style>
</head>
<body>
<div class="hero">
<div class="countdown">
<div class="time">
<span id="days">00</span>
<span>days</span>
</div>
<div class="semicolon">:</div>
<div class="time">
<span id="hours">00</span>
<span>hours</span>
</div>
<div class="semicolon">:</div>
<div class="time">
<span id="minutes">00</span>
<span>minutes</span>
</div>
<div class="semicolon">:</div>
<div class="time">
<span id="seconds">00</span>
<span>seconds</span>
</div>
</div>
</div>
<script>
function getCounter() {
var countDownDate = new Date("Aug 11, 2021 22:00:00").getTime();
var x = setInterval(function () {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var textDays = document.getElementById("days");
var textHours = document.getElementById("hours");
var textMinutes = document.getElementById("minutes");
var textSeconds = document.getElementById("seconds");
textDays.innerHTML = days < 10 ? "0" + days : days;
textHours.innerHTML = hours < 10 ? "0" + hours : hours;
textMinutes.innerHTML = minutes < 10 ? "0" + minutes : minutes;
textSeconds.innerHTML = seconds < 10 ? "0" + seconds : seconds;
if (distance < 0) {
clearInterval(x);
}
}, 1000);
}
getCounter();
</script>
</body>
</html>
