Membuat jam digital yang bordernya dapat berubah warna (modul 4 project 3)
Pada kesempatan kali saya akan membuat sebuah jam digital yang jika detiknya ganjil
maka warna bordernya akan berubah menjadi merah dan jika genap akan menjadi biru
1. Langkah Pertama
Kita harus membuat dokumen HTML dan membuat div untuk jam digitalnya
2. langkah Kedua
kita styling jam digitalnya menggunakan css seperti mengatur font size, border
radius, dan lainnya
3. Langkah Ketiga
membuat fungsi javascript dengan nama updateClock untuk memperbarui tampilan jam
4. Langkah Keempat
Membuat percabangan dengan if else, if detik habis dibagi dengan dua maka akan
merubah border jam menjadi biru dan else jika tidak habis dibagi dua maka akan merubah
border menjadi merah
5. Langkah Kelima
Mengatur interval fungsi updateClock 1000 milisecond (1 detik) dan memanggil fungsi
updateClock untuk menginisiasi tampilan jam
SourceCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital Clock</title>
<style>
#clock {
font-size: 2em;
padding: 10px;
display: inline-block;
border-radius: 10px;
}
.odd-second {
border: 2px solid blue;
}
.even-second {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
function updateClock() {
var clockElement = document.getElementById("clock");
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
var timeString = hours + ":" + minutes + ":" + seconds;
if (seconds % 2 === 1) {
clockElement.classList.remove("even-second");
clockElement.classList.add("odd-second");
} else {
clockElement.classList.remove("odd-second");
clockElement.classList.add("even-second");
}
clockElement.textContent = timeString;
}
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>
Hasilnya
Komentar
Posting Komentar