Cách thực hiện - Tạo hiệu ứng biểu tượng
Tìm hiểu cách sử dụng các biểu tượng để tạo hiệu ứng động.
Sạc pin
Hãy tự mình thử »
Bước 1) Thêm HTML:
Ví dụ
<div id="charging" class="fa"></div>
Bước 2) Bao gồm Thư viện Biểu tượng Phông chữ Tuyệt vời:
Ví dụ
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Đọc thêm về Font Awesome trong Hướng dẫn về Font Awesome của chúng tôi.
Bước 3) Thêm JavaScript:
Ví dụ
<script>
function chargebattery() {
var a;
a = document.getElementById("charging");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
setTimeout(function () {
a.innerHTML = "";
}, 3000);
setTimeout(function () {
a.innerHTML = "";
}, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>
Hãy tự mình thử »Ví dụ giải thích
Ví dụ này tạo ấn tượng về một cục pin đang được sạc nhưng thay vào đó là năm biểu tượng khác nhau được hiển thị.
Một hàm có tên chargebattery()
thực hiện tất cả việc thay thế và hiển thị các biểu tượng.
Chức năng bắt đầu bằng cách hiển thị biểu tượng pin trống:
Sau một giây, biểu tượng được thay thế bằng biểu tượng mới:
Biểu tượng được thay thế bằng biểu tượng mới mỗi giây, cho đến khi "sạc đầy pin":
Quá trình này được lặp lại cứ sau 5 giây, tạo cảm giác như pin đang được sạc.