Membuat Timer Countdown Menggunakan JavaScript
Timer countdown adalah komponen yang sering digunakan dalam aplikasi web untuk menghitung mundur waktu tertentu, seperti penghitungan mundur untuk acara khusus, penawaran terbatas, atau tugas berbatas waktu.
Mengapa Countdown Penting?
- Membangun Antisipasi: Countdown membangun antisipasi di antara pengunjung. Rasa ingin tahu tentang apa yang akan terjadi ketika waktu habis dapat mengundang mereka untuk kembali ke situs Anda.
- Menciptakan Urgensi: Countdown memberikan elemen urgensi. Orang cenderung merasa perlu bertindak ketika mereka tahu bahwa waktu terbatas.
- Pemberitahuan Acara: Countdown bisa digunakan untuk mempromosikan acara khusus seperti seminar, konferensi, atau pameran. Ini memberi tahu pengunjung berapa lama lagi acara tersebut akan dimulai.
- Peluncuran Produk: Jika Anda akan meluncurkan produk baru, countdown bisa memberi tahu kapan produk akan tersedia. Ini bisa membangun buzz dan keingintahuan di antara audiens.
Dalam artikel ini, kita akan membuat timer countdown sederhana menggunakan JavaScript.
Langkah 1: Struktur HTML Dasar
Mulailah dengan membuat struktur dasar HTML untuk timer countdown.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="timer">
<div class="time" id="days">00</div>
<div class="time" id="hours">00</div>
<div class="time" id="minutes">00</div>
<div class="time" id="seconds">00</div>
</div>
<script src="script.js"></script>
</body>
</html>
Langkah 2: Gaya CSS
Tambahkan beberapa gaya sederhana untuk mempercantik tampilan timer countdown anda.
/* styles.css */
body {
padding: 100px;
}
.timer {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
gap: 10px;
}
.time {
background-color: #333;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
Setelah file styles.css dibuat, jalankan file index.html anda dan lihat tampilannya pada browser
Tampilan timer countdown anda sudah memiliki tampilan lebuh menarik dan responsif dengan menerapkan styling menggunkan CSS.
Langkah 3: Script JavaScript Countdown
Buatlah file script.js dan tambahkan kode JavaScript seperti dibawah untuk melakukan proses menghitung mundur waktu.
// script.js
const countdownDate = new Date("2023-12-31T23:59:59").getTime();
const updateCountdown = () => {
const now = new Date().getTime();
const timeLeft = countdownDate - now;
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.getElementById("days").innerText = days < 10 ? "0" + days : days;
document.getElementById("hours").innerText = hours < 10 ? "0" + hours : hours;
document.getElementById("minutes").innerText = minutes < 10 ? "0" + minutes : minutes;
document.getElementById("seconds").innerText = seconds < 10 ? "0" + seconds : seconds;
};
setInterval(updateCountdown, 1000);
Penjelasan
- countdownDate adalah tanggal target untuk penghitungan mundur dalam bentuk timestamp.
- updateCountdown adalah fungsi yang menghitung waktu yang tersisa dan memperbarui elemen HTML yang sesuai.
- Fungsi setInterval memanggil updateCountdown setiap 1000 milidetik (1 detik) untuk memperbarui tampilan timer secara terus-menerus.
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat timer countdown sederhana dengan menerapkan JavaScript sehingga web kalian lebih terlihat interaktif. Anda juga dapat menyesuaikan tanggal target di langkah 3 sesuai kebutuhan Anda.
Kembangkan juga desain, warna dan tampilan countdown kalian dengan memodifikasi kembali file styles.css diatas.
Sekian artikel singkat dalam membuat halaman web countdown sederhana menggunakan HTML, CSS dan Javascript. Semoga bermanfaat dan bisa membantu teman-teman yang sedang belajar.
Tunggu artikel dan tutorial selanjutnya.
Terimakasih
Terimakasih tutorialnya kak
BalasHapus