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.

cara memperbaiki layanan google play

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:

  
  
  
  
 Digital Clock Using JavaScript

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:

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

NS 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 date = new Date();

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

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

if (hour == 0) {  
 hour = 12;  
} else {  
 if (hour > 12) {  
 hour = hour - 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).

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 ditugaskan ke div menggunakan innertext penyetel.

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

Memperbarui Jam Setiap Detik

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

setTimeout(Time, 1000);

Menata Jam Digital Menggunakan CSS

Buka style.css file dan paste kode berikut:

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

/* 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. Ini diimpor dari font Google menggunakan @impor . NS #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.

perangkat bluetooth tidak muncul di mac

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

Membagikan Membagikan Menciak Surel 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 Topik-topik yang berkaitan

Wordpress & Pengembangan Web
Pemrograman
HTML
Pengembangan web
JavaScript
CSS

Tentang Penulis Yuvraj Chandra(60 Artikel Diterbitkan)

Yuvraj adalah mahasiswa sarjana Ilmu Komputer di University of Delhi, India. Dia bersemangat tentang Pengembangan Web Full Stack. Ketika dia tidak menulis, dia menjelajahi kedalaman teknologi yang berbeda.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan