Come creare: icona animata
- Pagina precedente Linea di divisione del testo
- Pagina successiva Timer countdown
Impara come utilizzare le icone per creare effetti animati.
Carica batteria
Passo primo - Aggiungi HTML:
<div id="charging" class="fa"></div>
Passo secondo - Inclusione della libreria di icone Font Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Nel nostro Guida di Font Awesome Per ulteriori informazioni su Font Awesome.
Passo terzo - Aggiungi 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>
Esempio di spiegazione:
L'impressione data da questo esempio è che la batteria si sta caricando, ma in realtà vengono mostrate cinque icone diverse.
Un nome chargebattery() La funzione è responsabile di sostituire e mostrare tutte le icone.
Questa funzione mostra prima un'icona di batteria vuota:
Dopo un secondo, l'icona viene sostituita da un'icona nuova:
Ogni secondo viene sostituito un'icona nuova con l'icona corrente, fino a quando non si legge "batteria completamente carica":
Questo processo si ripete ogni 5 secondi, facendo sembrare che la batteria si sta caricando.
Più icone animate
Esempio
Esempio
Esempio
Esempio
Esempio
Esempio
- Pagina precedente Linea di divisione del testo
- Pagina successiva Timer countdown
