Cara Membuat Jam Digital Menggunakan HTML, CSS, dan JavaScript

Apakah Anda kode sampai kicau burung memberitahu Anda bahwa itu pagi? Lacak waktu dengan jam khusus ini.

Jam Digital adalah salah satu proyek pemula terbaik dalam JavaScript. Ini cukup mudah dipelajari untuk orang-orang dengan tingkat keahlian apa pun.

Dalam artikel ini, Anda akan mempelajari cara membuat jam digital untuk masjid digital Anda sendiri menggunakan HTML, CSS, dan JavaScript. Anda akan mendapatkan pengalaman langsung dengan berbagai konsep JavaScript seperti membuat variabel, menggunakan fungsi, bekerja dengan tanggal, mengakses dan menambahkan properti ke DOM, dan banyak lagi.

Mari kita mulai.

Komponen Jam Digital
Jam digital memiliki empat bagian: jam, menit, detik, dan meridiem.

Komponen jam digital
Struktur Folder Proyek Jam Digital
Buat folder root yang berisi file HTML, CSS, dan JavaScript. Anda dapat memberi nama file apa pun yang Anda inginkan. Di sini folder root diberi nama Digital-Clock . Menurut konvensi penamaan standar, file HTML, CSS, dan JavaScript masing-masing diberi nama index.html , styles.css , dan script.js .

Struktur Folder Jam Digital
Menambahkan Struktur ke Jam Digital Menggunakan HTML
Buka file index.html dan paste kode berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset = “utf-8”>
<title> Digital Clock Using JavaScript </title>
<link rel = “stylesheet” href = “styles.css”>
</head>
<body>
<div id = “digital-clock”> </div>
<script src = “script.js”> </script>
</body>
</html>
Di sini, sebuah div dibuat dengan id dari digital-jam led running text . Div ini digunakan untuk menampilkan jam digital menggunakan JavaScript. style.css adalah halaman CSS eksternal dan ditautkan ke halaman HTML menggunakan tag <link> . Demikian pula, script.js adalah halaman JS eksternal dan ditautkan ke halaman HTML menggunakan tag < script> .

Menambahkan Fungsionalitas ke Jam Digital Menggunakan JavaScript
Buka file script.js dan paste kode berikut:

function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = “”;
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = “PM”;
} else {
period = “AM”;
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour – 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById(“digital-clock”).innerText = hour + ” : ” + minute + ” : ” + second + ” ” + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t < 10) {
return “0” + t;
}
else {
return t;
}
}
Time();
Memahami Kode JavaScript
Fungsi Time() dan update() digunakan untuk menambahkan fungsionalitas ke Jam Digital.

Mendapatkan Elemen Waktu Saat Ini
Untuk mendapatkan tanggal dan waktu saat ini, Anda perlu membuat objek Date. Ini adalah sintaks untuk membuat objek Date di JavaScript:

var date = new Date();
Tanggal dan waktu saat ini akan disimpan dalam variabel tanggal . Sekarang Anda perlu mengekstrak jam, menit, dan detik saat ini dari objek tanggal.

date.getHours() , date.getMinutes(), dan date.getSeconds() digunakan untuk mendapatkan jam, menit, dan detik saat ini masing-masing dari objek tanggal. Semua elemen waktu disimpan dalam variabel terpisah untuk operasi lebih lanjut.

var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
Menetapkan Meridiem Saat Ini (AM/PM)
Karena Jam Digital dalam format 12 jam, Anda perlu menetapkan meridiem yang sesuai dengan jam saat ini. Jika jam saat ini lebih besar atau sama dengan 12, maka meridiemnya adalah PM (Post Meridiem) jika tidak, AM (Ante Meridiem).

var period = “”;
if (hour >= 12) {
period = “PM”;
} else {
period = “AM”;
}
Mengonversi Jam Saat Ini dalam Format 12 Jam
Sekarang Anda perlu mengubah jam saat ini menjadi format 12 jam. Jika jam saat ini adalah 0, maka jam saat ini diperbarui menjadi 12 (sesuai dengan format 12 jam). Selain itu, jika jam saat ini lebih besar dari 12, akan dikurangi 12 agar tetap selaras dengan format waktu 12 jam.

Memperbarui Elemen Waktu
Anda perlu memperbarui elemen waktu jika kurang dari 10 (Single-Digit). 0 ditambahkan ke semua elemen waktu satu digit (jam, menit, detik).

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t < 10) {
return “0” + t;
}
else {
return t;
}
}
Menambahkan Elemen Waktu ke DOM
Pertama, DOM diakses menggunakan id div target ( jam digital ). Kemudian elemen waktu ditetapkan ke div menggunakan penyetel innerText .

document.getElementById(“digital-clock”).innerText = hour + ” : ” + minute + ” : ” + second + ” ” + period;
Memperbarui Jam Setiap Detik
Jam diperbarui setiap detik menggunakan metode setTimeout() dalam JavaScript.

setTimeout(Time, 1000);
Menata Jam Digital Menggunakan CSS

/* Importing Open Sans Condensed Google font */
@import url(‘https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap’);

#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: ‘Open Sans Condensed’, sans-serif;
font-size: 64px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
CSS di atas digunakan untuk menata Jam Digital. Di sini, font Open Sans Condensed digunakan untuk menampilkan teks jam. Itu diimpor dari font Google menggunakan @import . The # digital-jam id selector digunakan untuk memilih div sasaran. Pemilih id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.

Leave a Comment

Your email address will not be published. Required fields are marked *