Cách tạo đồng hồ kỹ thuật số bằng HTML, CSS và JavaScript

Cách tạo đồng hồ kỹ thuật số bằng HTML, CSS và JavaScript

Đồng hồ kỹ thuật số 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 một đồng hồ kỹ thuật số của riêng mình bằng cách sử dụng HTML, CSS và JavaScript. Bạn sẽ có đượ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.



con số này thuộc về ai

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 tệp HTML, CSS và JavaScript. Bạn có thể đặt tên tệp bất kỳ 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 index.html , styles.css , và script.js tương ứng.



Thêm cấu trúc vào đồng hồ kỹ thuật số bằng HTML

Mở index.html tệp và dán mã sau:





Digital Clock Using JavaScript






Đây, một div được tạo ra với một Tôi của đồng hồ kỹ thuật số . 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 cách sử dụng nhãn. 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 cách sử dụng < script> nhãn.



Thêm chức năng cho đồng hồ kỹ thuật số bằng JavaScript

Mở script.js tệp 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 Thời gian() và cập nhật() các chức năng đượ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 Ngày trong JavaScript:

var date = new Date();

Ngày và giờ hiện tại sẽ được lưu trữ trong ngày Biến đổi. 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.

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 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();

Ấn định buổi trưa hiện tại (AM / PM)

Vì Đồng hồ kỹ thuật số ở định dạng 12 giờ, bạn cần chỉ định kinh tuyến 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ẽ giảm đi 12 để giữ cho nó phù hợp với định dạng thời gian 12 giờ.

Có liên quan: Làm thế nào để 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 trên một 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 (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 ( đồng hồ kỹ thuật số ). Sau đó, các phần tử thời gian được gán cho div bằng cách sử dụng innerText người định cư.

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 setTimeout () trong JavaScript.

setTimeout(Time, 1000);

Tạo kiểu cho Đồng hồ kỹ thuật số bằng CSS

Mở styles.css tệp và dán mã sau:

Có liên quan: Cách sử dụng CSS box-shadow: Thủ thuật và ví dụ

/* 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 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ừ các phông chữ của Google bằng cách sử dụng @nhập khẩu . Các #đồng hồ kỹ thuật số bộ chọn id được sử dụng để chọn div mục tiêu. Bộ chọn id sử dụng Tôi của một phần tử HTML để chọn một phần tử cụ thể.

Có liên quan: Ví dụ về mã CSS đơn giản mà 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 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 Trang GitHub .

Ghi chú : Mã được sử dụng trong bài viết này là MIT được 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.

làm thế nào để biến twitter của bạn thành màu xanh lam

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.

Đăng lại Đăng lại tiếng riu ríu E-mail Cách tạo một máy tính đơn giản bằng HTML, CSS và JavaScript

Mã đơn giản, được tính toán là cách để đi khi lập trình. Kiểm tra cách tạo máy tính của riêng bạn trong HTML, CSS và JS.

Đọc tiếp Chủ đề liên quan Giới thiệu về tác giả Yuvraj Chandra(60 bài báo đã xuất bản)

Yuvraj là sinh viên ngành Khoa học Máy tính tại Đại học Delhi, Ấn Độ. Anh ấy đam mê Phát triển Web Full Stack. Khi không viết, anh ấy đang khám phá chiều sâu của các công nghệ khác nhau.

Xem thêm từ Yuvraj Chandra

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký