Paano gumawa: Animadong ikon
Alamin kung paano gamitin ang mga ikon upang gumawa ng animadong epekto.
Baterya na nagkakarga
ikatlong hakbang - Magdagdag ng HTML:
<div id="charging" class="fa"></div>
ikatlong hakbang - Isama ang Font Awesome icon library:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Sa aming Font Awesome 教程 Para sa mas maraming impormasyon tungkol sa Font Awesome.
ikatlong hakbang - Magdagdag ng JavaScript:
<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>
Halimbawa ng paliwanag:
Ang halimbawa na ito ay nagbibigay sa kahalumigmig na pakiramdam na ang baterya ay nagkakaroon ng karga, ngunit sa katunayan ay ipinapakita ang limang iba't-ibang ikon.
Ang function na may pangalan chargebattery() Ang function na ito ay responsableng sa pagpalit at pagpapakita ng lahat ng ikon.
Ang function na ito ay unang nagpapakita ng isang bakanteng ikon ng baterya:
Pagkatapos ng isang segundo, ang ikon ay papalitan ng isang bagong ikon:
Bawat segundo, ang kasalukuyang ikon ay papalitan ng isang bagong ikon hanggang sa “baterya ay napuno”:
Ang prosesong ito ay paulit-ulit bawat 5 segundo, na nagbibigay sa kahalumigmig na pakiramdam na ang baterya ay nagkakaroon ng karga.
