Cara Membuat Jam Digital Menggunakan HTML, CSS, dan JavaScript

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 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.

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 Jam digital. Menurut konvensi penamaan standar, file HTML, CSS, dan JavaScript diberi nama index.html, style.css, dan script.js masing-masing.

Menambahkan Struktur ke Jam Digital Menggunakan HTML

Buka index.html file dan paste kode berikut:

Di sini, div dibuat dengan Indo dari jam digital. Div ini digunakan untuk menampilkan jam digital menggunakan JavaScript. style.css adalah halaman CSS eksternal dan ditautkan ke halaman HTML menggunakan a menandai. Demikian pula, script.js adalah halaman JS eksternal dan ditautkan ke halaman HTML menggunakan <naskah> menandai.

Menambahkan Fungsionalitas ke Jam Digital Menggunakan JavaScript

Buka script.js file dan paste kode berikut:

fungsi Waktu() {
// Membuat objek dari kelas Date
var tanggal = Tanggal baru();
// Dapatkan jam saat ini
var jam = date.getHours();
// Dapatkan menit saat ini
var menit = date.getMinutes();
// Dapatkan detik saat ini
var detik = date.getSeconds();
// Variabel untuk menyimpan AM / PM
var periode = "";
// Menetapkan AM / PM sesuai dengan jam saat ini
if (jam >= 12) {
titik = "PM";
} lain {
titik = "AM";
}
// Mengonversi jam dalam format 12 jam
jika (jam == 0) {
jam = 12;
} lain {
jika (jam > 12) {
jam = jam - 12;
}
}
// Memperbarui jam, menit, dan detik
// jika kurang dari 10
jam = pembaruan (jam);
menit = pembaruan (menit);
detik = pembaruan (kedua);
// Menambahkan elemen waktu ke div
document.getElementById("jam digital").innerText = jam + ": " + menit + ": " + detik + " " + titik;
// Setel Timer ke 1 detik (1000 mdtk)
setTimeout (Waktu, 1000);
}
// Berfungsi untuk memperbarui elemen waktu jika kurang dari 10
// Tambahkan 0 sebelum elemen waktu jika kurang dari 10
pembaruan fungsi (t) {
jika (t < 10) {
kembalikan "0" + t;
}
lain {
kembali t;
}
}
Waktu();

Memahami Kode JavaScript

Itu Waktu() dan memperbarui() fungsi yang 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 tanggal = Tanggal baru();

Tanggal dan waktu saat ini akan disimpan di tanggal variabel. Sekarang Anda perlu mengekstrak jam, menit, dan detik saat ini dari objek tanggal.

tanggal.getJam(), tanggal.getMinutes(), dan tanggal.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 jam = date.getHours();
var menit = date.getMinutes();
var detik = 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 periode = "";
if (jam >= 12) {
titik = "PM";
} lain {
titik = "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.

Terkait: Cara Menonaktifkan Pemilihan Teks, Potong, Salin, Tempel, dan Klik Kanan pada Halaman Web

jika (jam == 0) {
jam = 12;
} lain {
jika (jam > 12) {
jam = jam - 12;
}
}

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).

jam = pembaruan (jam);
menit = pembaruan (menit);
detik = pembaruan (kedua);
pembaruan fungsi (t) {
jika (t < 10) {
kembalikan "0" + t;
}
lain {
kembali t;
}
}

Menambahkan Elemen Waktu ke DOM

Pertama, DOM diakses menggunakan id div target (jam digital). Kemudian elemen waktu ditugaskan ke div menggunakan innertext penyetel.

document.getElementById("jam digital").innerText = jam + ": " + menit + ": " + detik + " " + titik;

Memperbarui Jam Setiap Detik

Jam diperbarui setiap detik menggunakan setWaktu habis() metode dalam JavaScript.

setTimeout (Waktu, 1000);

Menata Jam Digital Menggunakan CSS

Buka style.css file dan paste kode berikut:

Terkait: Cara Menggunakan CSS box-shadow: Trik dan Contoh

/* Mengimpor font Open Sans Condensed Google */
@impor url(' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght@300&display=swap');
#jam digital {
warna-latar belakang: #66ffff;
lebar: 35%;
margin: otomatis;
padding-atas: 50px;
bantalan-bawah: 50px;
font-family: 'Buka Sans Condensed', sans-serif;
ukuran font: 64px;
perataan teks: tengah;
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. Ini diimpor dari font Google menggunakan @impor. Itu #jam digital id selector digunakan untuk memilih div target. Pemilih id menggunakan Indo atribut elemen HTML untuk memilih elemen tertentu.

Terkait: Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit

Jika Anda ingin melihat kode sumber lengkap yang digunakan dalam artikel ini, ini dia Repositori GitHub. Juga, jika Anda ingin melihat versi langsung dari proyek ini, Anda dapat memeriksanya melalui Halaman GitHub.

Catatan: Kode yang digunakan dalam artikel ini adalah berlisensi MIT.

Kembangkan Proyek JavaScript Lainnya

Jika Anda seorang pemula di JavaScript dan ingin menjadi pengembang web yang baik, Anda perlu membangun beberapa proyek berbasis JavaScript yang baik. Mereka dapat menambah nilai resume Anda serta karir Anda.

Anda dapat mencoba beberapa proyek seperti Kalkulator, permainan Hangman, Tic Tac Toe, aplikasi cuaca JavaScript, halaman arahan interaktif, Alat Konversi Berat, Gunting Kertas Batu, dll.

Jika Anda mencari proyek berbasis JavaScript berikutnya, kalkulator sederhana adalah pilihan yang sangat baik.

Cara Membuat Kalkulator Sederhana Menggunakan HTML, CSS, dan JavaScript

Sederhana, kode yang dihitung adalah cara yang harus dilakukan saat memprogram. Lihat cara membuat kalkulator Anda sendiri dalam HTML, CSS, dan JS.

Baca Selanjutnya

Tentang Penulis