Зарядка аккумулятора
[html]
<div id="charging" class="fa"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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>
[/html]
Шаг 1) добавить HTML:
<div id="charging" class="fa"></div>
Шаг 2) включить шрифт Awesome Библиотека иконок:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Шаг 3) добавить 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>
Пример как работает:
• Пример дает впечатление батареи получая поручено, но вместо оно 5 по-разному иконы будучи показанным.
• Вызванная функция chargebattery() делает все заменять и показывать иконы.
• Функция запускается, отображая пустой значок аккумулятора:
• Через одну секунду значок заменяется новым значком:
• Иконка заменяется новой иконкой каждую секунду, пока "батарея полностью заряжена":
ЭТОТ ПРОЦЕСС ПОВТОРЯЕТСЯ КАЖДЫЕ 5 СЕКУНД, ЧТО ДЕЛАЕТ ЕГО ПОХОЖЕ, ЧТО БАТАРЕЯ ЗАРЯДКИ.
Другие анимированные значки
[html]<div id="div1" class="fa"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
function hourglass() {
var a;
a = document.getElementById("div1");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
}
hourglass();
setInterval(hourglass, 3000);
</script>
[/html]
[html]<style>
#div1 {
font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="div1" class="fa"></div>
<script>
function brakechain() {
var a;
a = document.getElementById("div1");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
}
brakechain();
setInterval(brakechain, 2000);
</script>
[/html]
[html]<style>
#div1 {
font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="div1" class="fa"></div>
<script>
function ratestar() {
var a;
a = document.getElementById("div1");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
}
ratestar();
setInterval(ratestar, 3000);
</script>
[/html]
[html]<style>
#div1 {
font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="div1" class="fa"></div>
<script>
function openfolder() {
var a;
a = document.getElementById("div1");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
}
openfolder();
setInterval(openfolder, 2000);
</script>
[/html]
[html]<style>
#div1 {
font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="div1" class="fa"></div>
<script>
function smile() {
var a;
a = document.getElementById("div1");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
setTimeout(function () {
a.innerHTML = "";
}, 3000);
}
smile();
setInterval(smile, 4000);
</script>
[/html]
[html]
<style>
#div1 {
font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="div1" class="fa"></div>
<script>
function hand() {
var a;
a = document.getElementById("div1");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 500);
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 1500);
}
hand();
setInterval(hand, 2000);
</script>
[/html]
- Подпись автора