Bạn có hay ngồi viết code cho đến ánh sáng bên ngoài cho bạn biết là trời đã sáng không? Hãy theo dõi thời gian với đồng hồ kỹ thuật số này.
- Cách sử dụng thuộc tính Display trong CSS để kiểm soát bố cục trang web
- Bật mí cẩm nang học lập trình web hiệu quả nhanh
- Học lập trình web nên học ngôn ngữ nào có tính ứng dụng cao?
- Học lập trình web bắt đầu từ đâu sẽ mang lại hiệu quả tốt?
- 8 mẹo và thủ thuật CSS mọi lập trình viên nên biết
- Các thành phần của đồng hồ kỹ thuật số
- Cấu trúc thư mục của dự án đồng hồ kỹ thuật số
- Thêm cấu trúc vào đồng hồ kỹ thuật số bằng HTML
- Thêm chức năng cho đồng hồ kỹ thuật số bằng JavaScript
- Hiểu mã JavaScript
- Lấy các yếu tố thời gian hiện tại
- Chỉ định Meridiem hiện tại [AM / PM]
- Chuyển đổi giờ hiện tại ở định dạng 12 giờ
- Cập nhật các yếu tố thời gian
- Thêm các yếu tố thời gian vào DOM
- Cập nhật đồng hồ mỗi giây
- Tạo kiểu cho Đồng hồ kỹ thuật số bằng CSS
- Phát triển các dự án JavaScript khác
Đây là một trong những dự án mới bắt đầu tốt nhất trong JavaScript. Nó khá dễ học đối với mọi người ở bất kỳ trình độ kỹ năng nào.
Trong bài viết này, bạn sẽ học 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 các 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.
Hãy 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à 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 file HTML, CSS và JavaScript. Bạn có thể đặt tên file theo bất cứ cách nào bạn muốn. Ở đây thư mục gốc được đặt tên là Digital-Clock. Theo quy ước đặt tên tiêu chuẩn, các file HTML, CSS và JavaScript được đặt tên lần lượt là index.html, styles.css và script.js.
Thêm cấu trúc vào đồng hồ kỹ thuật số bằng HTML
Mở file index.html và dán mã sau:
Digital Clock Using JavaScript
Ở đây, một div được tạo với id là digital-clock. Div này được sử dụng để hiển thị đồng hồ kỹ thuật số bằng JavaScript. styles.css là một trang CSS bên ngoài và được liên kết với trang HTML bằng thẻ . Tương tự, script.js là một trang JS bên ngoài và được liên kết với trang HTML bằng thẻ < script>.
Thêm chức năng cho đồng hồ kỹ thuật số bằng JavaScript
Mở file script.js và dá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ồ kỹ thuật số.
Lấy các yếu tố thời gian hiện tại
Để có ngày và 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 date. 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 date.
date.getHours[], date.getMinutes[] và date.getSeconds[] được sử dụng để lấy giờ, phút và giây hiện tại tương ứng từ đối tượng date. 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 Meridiem hiện tại [AM / PM]
Vì Đồng hồ kỹ thuật số có định dạng 12 giờ, bạn cần chỉ định Meridiem thích 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ì meridiem 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, thì nó sẽ trừ đi 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 nhỏ hơn 10 [Chữ số đơn]. 0 được thêm vào tất cả các phần tử thời gian có 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 cách sử dụng id của div đích [digital-clock]. Sau đó, các phần tử thời gian được gán cho div bằng cách sử dụng setter innerText.
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.
setTimeout[Time, 1000];
Tạo kiểu cho Đồng hồ kỹ thuật số bằng CSS
Mở file styles.css và dán mã sau:
/* 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 @import. # Digital-clock id selector đượ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ể.
Nếu bạn muốn xem toàn bộ mã nguồn được sử dụng trong bài viết này, đây là kho lưu trữ GitHub. Ngoài ra, nếu bạn muốn xem phiên bản trực tiếp của dự án này, bạn có thể xem qua GitHub Pages.
Lưu ý : Mã được sử dụng trong bài viết này được MIT cấp phép.
Phát triển các dự án JavaScript khác
Nếu bạn là người mới bắt đầu sử dụng JavaScript và muốn trở thành một nhà phát triển web giỏi, bạn cần phải xây dựng một số dự án tốt dựa trên JavaScript. Chúng có thể làm tăng giá trị cho bản lý lịch 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, Rock Paper Scissors, 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, một máy tính đơn giản là một lựa chọn tuyệt vời.
Dịch từ: //www.makeuseof.com/create-a-digital-clock-html-css-javascript/
Vân Nguyễn