BLOGTOP

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » BLOGTOP » Уголок wap мастера » JavaScript » Как использовать значки, чтобы сделать анимированный эффект

Как использовать значки, чтобы сделать анимированный эффект

Страница: 1
Ответить

Сообщений 1 страница 1 из 1

1

  • Автор: МАЧОнаДАЧЕ
  • Владелец "BT"
  • МАЧОнаДАЧЕ
  • Откуда: Новокузнецк
  • Зарегистрирован: 2022-03-17
  • Приглашений: 0
  • Сообщений: 782
  • Уважение: [+56/-1]
  • Позитив: [+34/-2]
  • Пол: Мужской
  • Возраст: 41 [1983-02-26]
  • Провел на форуме:
    17 дней 18 часов
  • Голосовые уведомления: 1
  • https://dl.dropboxusercontent.com/s/6xj5hs016td5dci/pelevin-otryvok.mp3

Зарядка аккумулятора
[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]

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему

0

Ответить
Страница: 1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


упс таблица

Откуда гость?
ВНИМАНИЕ! В подписи запрещены ссылки на конкурирующие сайты или форумы!

Вы здесь » BLOGTOP » Уголок wap мастера » JavaScript » Как использовать значки, чтобы сделать анимированный эффект