Cara Membuat Jam Digital Menggunakan HTML, CSS, dan JavaScript

Cara Membuat Jam Digital Menggunakan HTML, CSS, dan JavaScript

Jam Digital adalah antara projek pemula terbaik dalam JavaScript. Ia cukup mudah dipelajari untuk orang-orang dari mana-mana tahap kemahiran.





Dalam artikel ini, anda akan belajar bagaimana membuat jam digital anda sendiri menggunakan HTML, CSS, dan JavaScript. Anda akan mendapat pengalaman langsung dengan pelbagai konsep JavaScript seperti membuat pemboleh ubah, menggunakan fungsi, bekerja dengan tarikh, mengakses dan menambahkan sifat ke DOM, dan banyak lagi.



aplikasi permainan yang tidak menggunakan data

Mari kita mulakan.





Komponen Jam Digital

Jam digital mempunyai empat bahagian: jam, minit, saat kedua, dan meridiem.

Struktur Folder Projek Jam Digital

Buat folder root yang mengandungi fail HTML, CSS, dan JavaScript. Anda boleh menamakan fail apa sahaja yang anda mahukan. Di sini folder root dinamakan Jam digital . Menurut konvensyen penamaan standard, fail HTML, CSS, dan JavaScript diberi nama indeks.html , gaya.css , dan skrip.js masing-masing.



Menambah Struktur ke Jam Digital Menggunakan HTML

Buka indeks.html fail dan tampal kod berikut:





Digital Clock Using JavaScript






Di sini, a div dicipta dengan ID daripada jam digital . Div ini digunakan untuk memaparkan jam digital menggunakan JavaScript. gaya.css adalah halaman CSS luaran dan dihubungkan ke halaman HTML menggunakan a teg. Begitu juga, skrip.js adalah halaman JS luaran dan dihubungkan ke halaman HTML menggunakan < skrip> teg.



Menambah Fungsi ke Jam Digital Menggunakan JavaScript

Buka skrip.js fail dan tampal kod 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 Kod JavaScript

The Masa() dan kemas kini () fungsi digunakan untuk menambahkan fungsi ke Jam Digital.



Mendapatkan Elemen Masa Semasa

Untuk mendapatkan tarikh dan masa semasa, anda perlu membuat objek Date. Ini adalah sintaks untuk membuat objek Date dalam JavaScript:

var date = new Date();

Tarikh dan masa semasa akan disimpan di Tarikh pemboleh ubah. Sekarang anda perlu mengekstrak jam, minit, dan detik semasa dari objek tarikh.

tarikh.getHours () , date.getMinutes (), dan date.getSeconds () digunakan untuk mendapatkan jam, minit, dan detik semasa masing-masing dari objek tarikh. Semua elemen masa disimpan dalam pemboleh ubah berasingan untuk operasi selanjutnya.

var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

Menetapkan Tengahari Semasa (AM / PM)

Oleh kerana Jam Digital dalam format 12 jam, anda perlu menetapkan meridiem yang sesuai mengikut jam semasa. Sekiranya jam semasa lebih besar daripada atau sama dengan 12, maka meridiem adalah PM (Post Meridiem) sebaliknya, itu AM (Ante Meridiem).

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}

Menukar Waktu Semasa dalam Format 12 Jam

Sekarang anda perlu menukar jam semasa menjadi format 12 jam. Sekiranya jam semasa adalah 0, maka jam semasa dikemas kini menjadi 12 (mengikut format 12 jam). Juga, jika jam semasa lebih besar dari 12, jam dikurangkan 12 untuk memastikannya sejajar dengan format waktu 12 jam.

Berkaitan: Cara Melumpuhkan Pemilihan Teks, Potong, Salin, Tampal, dan Klik Kanan pada Halaman Web

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}

Mengemas kini Elemen Masa

Anda perlu mengemas kini elemen masa jika kurang dari 10 (Single-Digit). 0 dilampirkan pada semua elemen masa satu digit (jam, minit, saat).

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}

Menambah Elemen Masa ke DOM

Pertama, DOM diakses menggunakan id div target ( jam digital ). Kemudian elemen masa diberikan kepada div menggunakan Teks dalaman penyusun.

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

Mengemas kini Jam Setiap Saat

Jam dikemas kini setiap saat menggunakan setTimeout () kaedah dalam JavaScript.

setTimeout(Time, 1000);

Menggayakan Jam Digital Menggunakan CSS

Buka gaya.css fail dan tampal kod berikut:

Berkaitan: 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 menggayakan Jam Digital. Di sini, fon Open Sans Condensed digunakan untuk memaparkan teks jam. Ia diimport dari fon Google menggunakan @import . The #jam digital pemilih id digunakan untuk memilih div target. Pemilih id menggunakan ID atribut elemen HTML untuk memilih elemen tertentu.

Berkaitan: Contoh Kod CSS Ringkas yang Anda Boleh Pelajari dalam 10 Minit

Sekiranya anda ingin melihat kod sumber lengkap yang digunakan dalam artikel ini, berikut ini Repositori GitHub . Sekiranya anda ingin melihat versi langsung projek ini, anda boleh menyemaknya Halaman GitHub .

Catatan : Kod yang digunakan dalam artikel ini adalah MIT berlesen .

Kembangkan Projek JavaScript Lain

Sekiranya anda seorang pemula di JavaScript dan ingin menjadi pembangun web yang baik, anda perlu membina beberapa projek berasaskan JavaScript yang baik. Mereka boleh memberi nilai tambah kepada resume anda dan juga kerjaya anda.

Anda boleh mencuba beberapa projek seperti Kalkulator, permainan Hangman, Tic Tac Toe, aplikasi cuaca JavaScript, halaman arahan interaktif, Alat Penukaran Berat, Gunting Kertas Batu, dll.

cara membatalkan akaun paypal

Sekiranya anda mencari projek berasaskan JavaScript seterusnya, kalkulator ringkas adalah pilihan yang sangat baik.

Berkongsi Berkongsi Tweet E-mel Cara Membangun Kalkulator Mudah Menggunakan HTML, CSS, dan JavaScript

Kod yang mudah dikira adalah cara yang tepat semasa memprogram. Lihat cara membina kalkulator anda sendiri dalam HTML, CSS, dan JS.

Baca Seterusnya Topik-topik yang berkaitan Mengenai Pengarang Yuvraj Chandra(60 Artikel Diterbitkan)

Yuvraj adalah pelajar sarjana Sains Komputer di University of Delhi, India. Dia meminati Pembangunan Web Stack Penuh. Ketika dia tidak menulis, dia meneroka kedalaman teknologi yang berbeza.

Lagi Dari Yuvraj Chandra

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan