HTML5: <progress>

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Phần tử <progress> dùng để hiển thị tiến trình thực hiện (theo thời gian) của một tác vụ.

Các sự kiện DOM của phần tử:

Sự kiện DOM Mô tả
mselementresize Được kích hoạt khi phần tử HTML thay đổi kích thước

Các thuộc tính DOM của phần tử:

Thuộc tính Kiểu truy cập Mô tả
form   Lấy một tham chiếu đến form mà đối tượng được nhúng vào trong.
max Read/Write Định nghĩa giá trị lớn nhất hoặc giá trị "done" cho phần tử progress.
position Read-only Trả về thương số của value/max khi thiết lập giá trị cho thuộc tính value (thanh tiến trình được xác định), trả về -1 nếu không thiết lập giá trị cho thuộc tính value (thanh tiến trình không được xác định).
value Read/Write Thiết lập hoặc lấy giá trị hiện thời của phần tử <progress>, giá trị nằm trong đoạn [0,max].

Lưu ý:

Nếu Bạn không sử dụng thuộc tính value thì thanh tiến trình sẽ ở trạng thái không được xác định (ring or inderteminate), khi đó thanh tiến trình vẫn xuất hiện nhưng không có hiệu ứng tiến trình. Còn nếu Bạn sử dụng thuộc tính value nhưng không sử dụng thuộc tính max thì dải tiến trình sẽ là từ 0 đến 1. Bạn cũng có thể sử dụng CSS để thay đổi dạng thể hiện của tiến trình như màu nền, màu chữ (màu tiến trình), ...

Ví dụ:

<html>
<head>
<meta charset="utf-8">
<title>Progress bar example</title>
<style type="text/css">
progress{
/* style the progress bar */
border: 1px solid black;
color: red;
background-color:Yellow;
}
</style>
<script>
function goingUp(){
// add 5% to value
var pBar = document.getElementById( "pbar");
if (pBar.value <= (pBar.max - 5)){
pbar.value += 5;
}
checkStatus();
}
function checkStatus(){
// Shows position and value
// -1 for indeterminate, otherwise current value divided by max.

var pBar = document.getElementById( "pbar");
document.getElementById( "positionStatus").innerHTML = "Value: " + pBar.value;
document.getElementById( "positionStatus").innerHTML += "<br/>Position: " + pBar.position.toFixed(3);
}
function toggle(){
var pBar = document.getElementById( "pbar");
if (pBar.hasAttribute("value")) {
// Removing the value attribute makes the progress bar indeterminate
pBar.removeAttribute( "value");
document.getElementById( "tgl").innerHTML = "Make determinate";
} else {
// Setting the value attribute makes the progress bar determinate
pBar.value = 5;
document.getElementById( "tgl").innerHTML = "Make indeterminate";
}
checkStatus();
}
</script>
</head>
<body onload="checkStatus();">
<h1>Progress bar test</h1>
<p>Thanh tiến trình không xác định: <progress></progress></p>
<p>Nút lệnh "Make determinate" hoặc "Make indeterminate" dùng để nạp hoặc huỷ tiến trình.</p>
<p>Click nút lệnh "Up" để thực hiện tiến trình (mỗi lần click tăng 5%).</p>
<div>
<label id="progLabel">Progress: <progress id="pbar" max="100">Put alternate display here</progress></label>
<button onclick="goingUp();">Up</button>
<button id= "tgl" onclick="toggle();">Make determinate</button>
</div>
<div id="positionStatus"></div>
</body>
</html>

 
» Tiếp: <section>
« Trước: <output>
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!