Các thanh tiến trình được sử dụng để xác định các mốc nhất định trong một nhiệm vụ theo tỷ lệ phần trăm. Bạn có thể tạo thanh tiến trình trong xác định tiến độ hoàn thành của một nhiệm vụ. Giá trị của thanh tiến trình có thể được thao tác bằng JavaScript. Trong bài viết này, chúng ta sẽ xem cách bạn có thể tạo thanh tiến trình với sự trợ giúp của HTML, CSS và JavaScript theo trình tự sau:
Hãy bắt đầu nào.
Làm thế nào để tạo thanh tiến trình trong HTML?
Thanh Tiến trình mô tả tiến trình của bất kỳ nhiệm vụ nào đang được thực hiện. Nói chung, các thanh này được sử dụng để hiển thị trạng thái tải xuống và tải lên. Chúng ta có thể nói rằng Thanh tiến trình có thể được sử dụng để mô tả trạng thái của bất kỳ thứ gì đang diễn ra.
Để tạo Thanh tiến trình cơ bản bằng cách sử dụng , các bước sau cần được thực hiện:
- Tạo cấu trúc HTML cho thanh tiến trình của bạn - HTML nhãn chỉ định tiến độ hoàn thành của một nhiệm vụ.
- Thêm CSS - Bước tiếp theo là thêm màu nền của thanh tiến trình cũng như trạng thái tiến trình trong thanh với sự trợ giúp của CSS .
#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}- Thêm JavaScript - Bước tiếp theo là tạo một thanh progess hoạt hình động bằng cách sử dụng hàm javascript cập nhật và bối cảnh .
function update () {var element = document.getElementById ('myprogressBar') var width = 1 var Identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (Identity)} else {width ++ element.style.width = width + '%'}}}Bây giờ bạn đã biết các bước khác nhau để tạo thanh tiến trình, hãy tiếp tục và xem ví dụ đầy đủ về thanh tiến trình.
Thanh tiến trình: Ví dụ
Khi bạn đã hoàn thành các bước khác nhau để tạo thanh tiến trình, đã đến lúc liên kết HTML, CSS và Các phần tử JavaScript . Ví dụ sau đây cho thấy mã hoàn chỉnh của thanh tiến trình liên kết ở trên HTML, CSS và JavaScript Mã:
cấu trúc dữ liệu và thuật toán trong hướng dẫn java
#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}Ví dụ về thanh tiến trình sử dụng JavaScript
Trạng thái Tải xuống của Tệp:
Bắt đầu Tải xuống chức năng update () {var element = document.getElementById ('myprogressBar') var width = 1 var Identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (ID)} else {width ++ element.style.width = width + '%'}}}Đầu ra:
Với điều này, chúng ta đã đi đến phần cuối của bài viết của chúng tôi. Tôi hy vọng bạn đã hiểu các bước khác nhau cần thiết để tạo thanh tiến trình.
Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog này và chúng tôi sẽ liên hệ lại với bạn.