Membuat Countdown Clock Dengan JavaScript
Dalam tutorial ini, kita akan belajar bagaimana membuat Countdown Clock dinamis menggunakan HTML, CSS, dan JavaScript. Countdown Clock adalah cara yang fantastis untuk menghidupkan semangat dan menciptakan antisipasi menghadapi acara atau batas waktu yang akan datang.
Berikut ini adalah pratinjau dari apa yang sedang kami buat:
Langkah 1: Struktur HTML
Untuk memulai, mari kita siapkan struktur HTML dasar untuk Countdown Clock kita. Kami akan menggunakan empat elemen persegi untuk mewakili label hari, jam, menit, dan detik.
<body>
<h1>Countdown to Event</h1>
<div class="countdown">
<div class="square">
<span id="days">00</span>
<span class="label">Days</span>
</div>
<div class="square">
<span id="hours">00</span>
<span class="label">Hours</span>
</div>
<div class="square">
<span id="minutes">00</span>
<span class="label">Minutes</span>
</div>
<div class="square">
<span id="seconds">00</span>
<span class="label">Seconds</span>
</div>
</div>
</body>
Langkah 2: Gaya CSS
Selanjutnya, mari terapkan beberapa CSS dasar untuk mengatur gaya Countdown Clock kita.
/* styles.css */
body {
font-family: 'Staatliches', cursive;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
text-align: center;
font-size: 45px;
margin: 0;
padding: 0;
color: #C5283D;
}
.countdown {
display: flex;
justify-content: center;
margin-top: 50px;
}
.square {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 10px;
}
.square span {
font-size: 48px;
}
.label {
margin-top: 10px;
text-align: center;
}
span.label{
font-size: 30px;
}
Langkah 3: Fungsi JavaScript
Sekarang, mari tambahkan kode JavaScript untuk membuat Countdown Clock kita menjadi dinamis. Kami akan menghitung sisa waktu berdasarkan tanggal saat ini dan tanggal acara target. Kemudian, kami akan memperbarui nilai waktu setiap detik.
function countdown() {
// code goes here
}
Kami mendefinisikan fungsi countdown yang menghitung sisa waktu dalam hari, jam, menit, dan detik berdasarkan perbedaan antara tanggal acara target dan tanggal saat ini.
function countdown() {
const targetDate = new Date("2023-12-31"); // Set your target event date here
const now = new Date();
const difference = targetDate - now;
}
Kami menggunakan objek Date untuk membuat instance untuk tanggal acara target (targetDate) dan tanggal saat ini (now). Kemudian kami menghitung perbedaan waktu dengan mengurangkan tanggal saat ini dari tanggal acara target, yang memberi kami perbedaan dalam milidetik.
function countdown() {
const targetDate = new Date("2023-12-31"); // Set your target event date here
const now = new Date();
const difference = targetDate - now;
let days = Math.floor(difference / (1000 * 60 * 60 * 24));
let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
}
Kami melakukan beberapa perhitungan matematis untuk mengubah milidetik menjadi hari, jam, menit, dan detik.
function countdown() {
const targetDate = new Date("2023-12-31"); // Set your target event date here
const now = new Date();
const difference = targetDate - now;
let days = Math.floor(difference / (1000 * 60 * 60 * 24));
let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
days = days.toString().padStart(2, "0");
hours = hours.toString().padStart(2, "0");
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
}
Kami menggunakan toString().padStart(2, "0") untuk memastikan bahwa setiap nilai waktu selalu ditampilkan sebagai angka dua digit, meskipun kurang dari 10.
function countdown() {
const targetDate = new Date("2023-12-31"); // Set your target event date here
const now = new Date();
const difference = targetDate - now;
let days = Math.floor(difference / (1000 * 60 * 60 * 24));
let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
days = days.toString().padStart(2, "0");
hours = hours.toString().padStart(2, "0");
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
document.getElementById("days").textContent = days;
document.getElementById("hours").textContent = hours;
document.getElementById("minutes").textContent = minutes;
document.getElementById("seconds").textContent = seconds;
}
Kami memperbarui elemen terkait dalam HTML menggunakan document.getElementById dan menyetel konten teksnya ke nilai waktu yang dihitung.
setInterval(countdown, 1000);
Terakhir, kami memanggil fungsi countdown setiap detik menggunakan setInterval untuk terus memperbarui hitungan mundur secara real-time.
function countdown() {
const targetDate = new Date("2023-12-31"); // Set your target event date here
const now = new Date();
const difference = targetDate - now;
let days = Math.floor(difference / (1000 * 60 * 60 * 24));
let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
days = days.toString().padStart(2, "0");
hours = hours.toString().padStart(2, "0");
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
document.getElementById("days").textContent = days;
document.getElementById("hours").textContent = hours;
document.getElementById("minutes").textContent = minutes;
document.getElementById("seconds").textContent = seconds;
}
setInterval(countdown, 1000);
Langkah 4: Kesimpulan dan Konsep Kunci Tercakup
Dan itu saja! Anda telah berhasil membuat Countdown Clock yang dinamis. Pengguna sekarang dapat melihat sisa hari, jam, menit, dan detik hingga acara target.
Dalam tutorial ini, kami membahas konsep utama berikut:
- Struktur HTML menggunakan elemen div untuk mewakili jCountdown Clock.
- Gaya CSS untuk menciptakan tampilan yang diinginkan.
- Objek Tanggal JavaScript untuk menghitung sisa waktu.
- Memanipulasi dan memperbarui elemen HTML menggunakan JavaScript.
- Memanfaatkan
setIntervaluntuk memperbarui Countdown secara real-time.