Hướng dẫn how do i add a digital clock in html? - làm cách nào để thêm đồng hồ kỹ thuật số trong html?

Question

Đồ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.

Nội dung chính Show

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 cách sử dụng HTML
Thêm chức năng vào đồng hồ kỹ thuật số bằng cách sử dụng JavaScript
Hiểu mã JavaScript
Nhận các yếu tố thời gian hiện tại
Gán 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 phần tử thời gian vào DOM
Cập nhật đồng hồ mỗi giây
Tạo kiểu đồng hồ kỹ thuật số bằng CSS
Phát triển các dự án JavaScript khác
Làm thế nào để bạn tạo một đồng hồ kỹ thuật số trong HTML?
Làm thế nào để bạn làm một chiếc đồng hồ kỹ thuật số?
Làm cách nào để nhận được JavaScript trong HTML?
JavaScript trong HTML là gì?

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.

Components
of the digital clock

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.

Digital Clock Folder Structure

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:

<!DOCTYPE html>
<html>
 <head>
 <meta charset = "utf-8">
 <title> Digital Clock Using JavaScript </title>
 "stylesheet" href = "styles.css">
 </head>
 <body>
 <div id = "digital-clock"> </div>
 <script srx = "script.js"> </script>
 </body>
</html>

Ở đâ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 <script> 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 < 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 vào đồng hồ kỹ thuật số.Time() and update() functions are used to add functionality to the Digital Clock.

Nhận các yếu tố thời gian hiện tại

Để có được ngày và giờ hiện tại, bạn cần tạo một đối tượng ngày. Đây là cú pháp để tạo một đối tượng ngày trong JavaScript:

var date = new Date();

Ngày và thời gian 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à thứ hai hiện tại từ đối tượng ngày.date variable. Now you need to extract the current hour, minute, and second from the date object.

date.gethours (), date.getMinutes () và date.getSeconds () & nbsp; được sử dụng để có được giờ, phút và thứ hai hiện tại từ đối tượng ngày. 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., date.getMinutes(), and date.getSeconds() are used to get the current hour, minute, and second respectively from the date object. All of the time elements are stored in separate variables for further operations.

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

Gán Meridiem hiện tại (AM/PM)

Vì đồng hồ kỹ thuật số ở đị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 (sau meridiem) nếu không, đó 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 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 < 10) {
 return "0" + t;
 }
 else {
 return t;
 }
}

Thêm các phần tử thời gian vào DOM

Đầu tiên, DOM được truy cập bằng ID 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 bộ đặt bên trong.digital-clock). Then the time elements are assigned to the div using the innerText setter.

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 phương thức setTimeout () trong javascript.setTimeout() method in JavaScript.

setTimeout(Time, 1000);

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

Mở tệp Styles.css và dán mã sau:styles.css file and paste the following code:

/* 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);
}

Các CSS trên được sử dụng để tạo kiểu đồng hồ kỹ thuật số. Ở đây, phông chữ cô đọng Sans mở được sử dụng để hiển thị văn bản của đồng hồ. Nó được nhập từ Google Fonts bằng @Import. Bộ chọn & NBSP;#Digital-Cock-Cock & NBSP; được sử dụng để chọn Div đích. Bộ chọn ID sử dụng thuộc tính ID của phần tử HTML để chọn một phần tử cụ thể.@import. The #digital-clock id selector is used to select the target div. The id selector uses the id attribute of an HTML element to select a specific element.

Nếu bạn muốn xem mã nguồn đầy đủ đượ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 & nbsp; hãy xem phiên bản trực tiếp của dự án này, bạn có thể kiểm tra nó thông qua các trang GitHub.

Lưu ý: Mã được sử dụng trong bài viết này được cấp phép MIT.: The code used in this article is MIT licensed.

Phát triển các dự án JavaScript khác

Nếu bạn là người mới bắt đầu tại 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. & NBSP; Họ có thể thêm giá trị cho sơ yếu 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 treo cổ, ngón chân Tic Tac, ứng dụng thời tiết JavaScript, trang đích tương tác, công cụ chuyển đổi trọng lượng, & NBSP; Kéo giấy đá, 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, A & NBSP; Máy tính đơn giản là một lựa chọn tuyệt vời.

Làm thế nào để bạn tạo một đồng hồ kỹ thuật số trong HTML?

Mã HTML: Trong phần này, chúng ta có một thời gian giả ở định dạng của HH HH: MM: SS, được bọc bên trong một thẻ div Div ...

Bước 1: Tạo một chức năng của Show Showtime ..

Bước 2: Tạo một thể hiện của đối tượng ngày ..

Bước 3: Sử dụng các phương thức của đối tượng ngày nhận được giờ, thì phút, phút và giây.

Làm thế nào để bạn làm một chiếc đồng hồ kỹ thuật số?

Những điều bạn sẽ cần..

Bánh mì điện tử với các clip ..

Ổ cắm mạch tích hợp để làm bánh điện tử ..

Bộ điều chỉnh điện áp và hỗ trợ thiết bị điện tử rời rạc ..

Trình tạo cơ sở thời gian và hỗ trợ thiết bị điện tử rời rạc ..

Bộ đếm mạch tích hợp ..

DIODE phát sáng DIODE (LED) Mạch tích hợp trình điều khiển hiển thị ..

Làm cách nào để nhận được JavaScript trong HTML?

Thêm JavaScript vào tài liệu HTML, bạn có thể thêm mã JavaScript vào tài liệu HTML bằng cách sử dụng thẻ HTML chuyên dụng bao quanh mã JavaScript.Thẻ có thể được đặt trong phần HTML của bạn hoặc trong phần, tùy thuộc vào thời điểm bạn muốn JavaScript tải.employing the dedicated HTML tag

programming html Show time HTML Font digital CSS Calculator HTML

Bài Viết Liên Quan

Khắc phục lỗi không thể khởi động win năm 2024

Hướng dẫn how do i add a digital clock in html? - làm cách nào để thêm đồng hồ kỹ thuật số trong html?

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 cách sử dụng HTML

Thêm chức năng vào đồng hồ kỹ thuật số bằng cách sử dụng JavaScript

Hiểu mã JavaScript

Nhận các yếu tố thời gian hiện tại

Gán 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 phần tử thời gian vào DOM

Cập nhật đồng hồ mỗi giây

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

Phát triển các dự án JavaScript khác

Làm thế nào để bạn tạo một đồng hồ kỹ thuật số trong HTML?

Làm thế nào để bạn làm một chiếc đồng hồ kỹ thuật số?

Làm cách nào để nhận được JavaScript trong HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội