Đồng hồ kỹ thuật số là một trong những dự án dành cho người mới bắt đầu tốt nhất về JavaScript. Nó khá dễ học đối với mọi người ở mọi trình độ kỹ năng
Trong bài viết này, bạn sẽ tìm hiểu cách tạo đồng hồ kỹ thuật số của riêng mình bằng HTML, CSS và JavaScript. Bạn sẽ có trải nghiệm thực tế với nhiều khái niệm JavaScript khác nhau như tạo biến, sử dụng hàm, làm việc với ngày tháng, truy cập và thêm 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ó bốn phần. giờ, phút, giây và kinh tuyến
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 tin bất cứ điều gì bạn muốn. Ở đây thư mục gốc có tên là Digital-Clock. Theo quy ước đặt tên tiêu chuẩn, các tệp HTML, CSS và JavaScript được đặt tên là chỉ mục. html, phong cách. css và tập lệnh. js tương ứng
Thêm cấu trúc vào đồng hồ kỹ thuật số bằng HTML
mở chỉ mục. html và dán đoạn mã sau
Digital Clock Using JavaScript
Here, a 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 JavaScript
mở kịch bản. js và dán đoạn mã sau
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[]; Hiểu mã JavaScript
Các hàm Time[] và update[] được sử dụng để thêm chức năng cho Đồng hồ số
Lấy các yếu tố thời gian hiện tại
Để có được ngày giờ hiện tại, bạn cần tạo một đối tượng Date. Đây là cú pháp tạo đối tượng Date trong JavaScript
var date = new Date[]; Ngày và giờ hiện tại sẽ được lưu trữ trong biến ngày. Bây giờ bạn cần trích xuất giờ, phút và giây hiện tại từ đối tượng ngày tháng
ngày tháng. getHours[], ngày. getMinutes[] và ngày tháng. getSeconds[] được sử dụng để lấy giờ, phút và giây hiện tại tương ứng từ đối tượng ngày tháng. Tất cả các yếu tố thời gian được lưu trữ trong các biến riêng biệt cho các hoạt động tiếp theo
var hour = date.getHours[];
var minute = date.getMinutes[];
var second = date.getSeconds[]; Chỉ định kinh tuyến hiện tại [AM/PM]
Vì Đồng hồ số có định dạng 12 giờ nên bạn cần gán kinh tuyến phù hợp theo giờ hiện tại. Nếu giờ hiện tại lớn hơn hoặc bằng 12 thì kinh tuyến là PM [Post Meridiem] ngược lại là AM [Ante Meridiem]
var period = "";
if [hour >= 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 thành 12 [theo định dạng 12 giờ]. Ngoài ra, nếu giờ hiện tại lớn hơn 12 giờ, thì giờ đó sẽ giảm đi 12 giờ để phù hợp với định dạng thời gian 12 giờ
Có liên quan. Cách vô hiệu hóa lựa chọn văn bản, cắt, sao chép, dán và nhấp chuột phải vào trang web
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 nhỏ hơn 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, giây]
hour = update[hour];
minute = update[minute];
second = update[second];
function update[t] {
if [t < 10] {
return "0" + t;
}
else {
return t;
}
} Thêm các yếu tố thời gian vào DOM
Đầu tiên, DOM được truy cập bằng id của div đích [đồng hồ kỹ thuật số]. Sau đó, các yếu tố thời gian được gán cho div bằng cách sử dụng trình thiết lập InternalText
document.getElementById["digital-clock"].innerText = hour + " : " + minute + " : " + second + " " + period; Cập nhật đồng hồ mỗi giây
Đồng hồ được cập nhật mỗi giây bằng cách sử dụng phương thức setTimeout[] trong JavaScript
________số 8Tạo kiểu cho Đồng hồ kỹ thuật số bằng CSS
Mở phong cách. css và dán đoạn mã sau
Có liên quan. Cách sử dụng bóng hộp CSS. Thủ thuật và ví dụ
/* Importing Open Sans Condensed Google font */
@import url['//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 trên được sử dụng để tạo kiểu cho Đồng hồ kỹ thuật số. Ở đây, phông chữ Open Sans Condensed được sử dụng để hiển thị văn bản của đồng hồ. Nó được nhập từ phông chữ của Google bằng cách sử dụng @import. Bộ chọn #digital-clock id được sử dụng để chọn div đích. Bộ chọn id sử dụng thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể
Có liên quan. Ví dụ mã CSS đơn giản bạn có thể học trong 10 phút
Nếu bạn muốn xem mã nguồn hoàn chỉnh được sử dụng trong bài viết này, đây là kho lưu trữ GitHub. Ngoài ra, nếu muốn xem phiên bản trực tiếp của dự án này, bạn có thể xem qua Trang GitHub
Ghi chú. Mã được sử dụng trong bài viết này được cấp phép bởi MIT
Phát triển các dự án JavaScript khác
Nếu bạn là người mới bắt đầu học JavaScript và muốn trở thành một nhà phát triển web giỏi, bạn cần xây dựng một số dự án dựa trên JavaScript tốt. Họ có thể thêm giá trị cho sơ yếu lý lịch của bạn cũng như sự nghiệp của bạn
Bạn có thể thử một số dự án như Máy tính, trò chơi Hangman, Tic Tac Toe, ứng dụng thời tiết JavaScript, trang đích tương tác, Công cụ chuyển đổi trọng lượng, oẳn tù tì, v.v.
Nếu bạn đang tìm kiếm dự án dựa trên JavaScript tiếp theo của mình, thì một máy tính đơn giản là một lựa chọn tuyệt vời