Đồng hồ kỹ thuật số javascript với ngày w3schools

Question

Các bạn đọc like ủng hộ MUO nhé. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêm

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

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 HTML
Thêm chức năng vào Đồ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 kinh tuyến 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
Làm cách nào để tạo đồng hồ kỹ thuật số có ngày trong JavaScript?
Làm cách nào để hiển thị đồng hồ kỹ thuật số trong JavaScript?
Làm cách nào để có được thời gian trực tiếp trong JavaScript?
Làm cách nào để tạo đồng hồ bằng HTML CSS và JavaScript?

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

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 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

Digital Clock Folder Structure

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

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

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

 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ố 8

Tạ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('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ừ 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

Làm cách nào để tạo đồng hồ kỹ thuật số có ngày trong JavaScript?

First, create a div element with a unique id “clockdate” and place two div elements inside it with an id "clock" and "date" respectively. 3. Finally, add the JavaScript function (between the

programming javascript

Bài Viết Liên Quan

Cách dạy con học toán lớp 1 hiệu quả năm 2024

Đồng hồ kỹ thuật số javascript với ngày w3schools

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 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

Làm cách nào để tạo đồng hồ kỹ thuật số có ngày trong JavaScript?

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