Cách thực hiện - Thanh tiến trình JavaScript
Tìm hiểu cách tạo thanh tiến trình bằng JavaScript.
Tạo thanh tiến trình
Bước 1) Thêm HTML:
Ví dụ
<div id="myProgress">
<div id="myBar"></div>
</div>
Bước 2) Thêm CSS:
Ví dụ
#myProgress {
width: 100%;
background-color:
grey;
}
#myBar {
width: 1%;
height:
30px;
background-color: green;
}
Bước 3) Thêm JavaScript:
Tạo Thanh tiến trình động (hoạt hình) bằng JavaScript:
Ví dụ
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
Hãy tự mình thử »Thêm Nhãn
Nếu bạn muốn thêm nhãn để cho biết người dùng đã đi được bao xa trong quá trình này, hãy thêm phần tử mới bên trong (hoặc bên ngoài) thanh tiến trình:
Bước 1) Thêm HTML:
Ví dụ
<div id="myProgress">
<div id="myBar">10%</div>
</div>
Bước 2) Thêm CSS:
Ví dụ
#myBar {
width: 10%;
height:
30px;
background-color: #04AA6D;
text-align: center; /* To center it horizontally (if you want) */
line-height: 30px; /* To center it vertically */
color:
white;
}
Hãy tự mình thử »Bước 3) Thêm JavaScript:
Nếu bạn muốn cập nhật động văn bản bên trong nhãn với cùng giá trị độ rộng của thanh tiến trình, hãy thêm thông tin sau:
Ví dụ
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
Hãy tự mình thử »