Đồng hồ kỹ thuật số là & nbsp; trong số & nbsp; các dự án mới bắt đầu tốt nhất trong JavaScript. Nó khá & nbsp; dễ học cho mọi người ở bất kỳ cấp độ kỹ năng nào.
Trong bài viết này, bạn sẽ học cách xây dựng một chiếc đồng hồ kỹ thuật số của riêng bạn bằng cách sử dụng HTML, CSS và JavaScript. Bạn sẽ nhận được trải nghiệm thực hành & nbsp; với các khái niệm JavaScript khác nhau như tạo các biến, sử dụng các chức năng, làm việc với ngày, truy cập và thêm các thuộc tính vào DOM, v.v.
Bắt đầu nào.
Các thành phần của đồng hồ kỹ thuật số
Đồng hồ kỹ thuật số có & nbsp; bốn phần: giờ, phút, thứ hai và meridiem.
Cấu trúc thư mục của dự án đồng hồ kỹ thuật số
Tạo một thư mục gốc chứa các tệp HTML, CSS và JavaScript. Bạn có thể đặt tên cho các tệp bất cứ thứ gì bạn muốn. Ở đây thư mục gốc được đặt tên là đồng hồ kỹ thuật số. Theo quy ước đặt tên tiêu chuẩn, các tệp HTML, CSS và JavaScript được đặt tên là index.html, styles.css và script.js tương ứng.Digital-Clock. According to the standard naming convention, the HTML, CSS, and JavaScript files are named index.html, styles.css, and script.js respectively.
Thêm cấu trúc vào đồng hồ kỹ thuật số bằng cách sử dụng HTML
Mở tệp index.html và dán mã sau:index.html file and paste the following code:
Digital Clock Using JavaScript
Ở đây, một div được tạo với ID & nbsp; Digital-Cock. & Nbsp; Div này được sử dụng để hiển thị đồng hồ kỹ thuật số bằng cách sử dụng JavaScript. & NBSP; styles.css là trang CSS bên ngoài và được liên kết với trang HTML bằng cách sử dụng A & NBSP; nhãn. Tương tự, script.js là trang JS bên ngoài và được liên kết với trang HTML bằng thẻ & nbsp;div is created with an id of digital-clock. This div is used to display the digital clock using JavaScript. styles.css is an external CSS page and is linked to the HTML page using a tag. Similarly, script.js is an external JS page and is linked to the HTML page using the tag.
Thêm chức năng vào đồng hồ kỹ thuật số bằng cách sử dụng JavaScript
Mở tệp script.js và dán mã sau:script.js file and paste the following code:
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 = 12] {
period = "PM";
} else {
period = "AM";
}Chuyển đổi giờ hiện tại ở định dạng 12 giờ
Bây giờ bạn cần chuyển đổi giờ hiện tại thành định dạng 12 giờ. Nếu giờ hiện tại là 0, thì giờ hiện tại được cập nhật lên 12 [theo định dạng 12 giờ]. Ngoài ra, nếu giờ hiện tại lớn hơn 12, & nbsp; nó giảm 12 để giữ cho nó phù hợp với định dạng thời gian 12 giờ.
if [hour == 0] {
hour = 12;
} else {
if [hour > 12] {
hour = hour - 12;
}
}Cập nhật các yếu tố thời gian
Bạn cần cập nhật các yếu tố thời gian nếu chúng dưới 10 [một chữ số]. 0 được thêm vào tất cả các yếu tố thời gian một chữ số [giờ, phút, thứ hai].
hour = update[hour];
minute = update[minute];
second = update[second];
function update[t] {
if [t