<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать прогресс бар

Как сделать прогресс бар

Темой сегодняшнего урока, будет создание прогресс бара. Это длинная полоска, которая заполняется цветом, по мере выполнения какой-либо задачи, например загрузки файла.

Впрочем прогресс бар может выглядеть и по другому. Смысл его состоит в том, чтобы чем-то занять пользователя, на время выполнения невидимого процесса.

Веб-разработчики, вообще-то редко сталкиваются с индикатором загрузки, но не спешите уходить. Вам стоит отнестись к этому уроку, как к великолепной возможности, погрузиться в мир языка программирования JavaScript, не столько ради прогресс бара, а увидеть на конкретном примере, как работает JavaScript.

Демонстрация примера


HTML разметка

На скриншоте отчетливо видно, что индикатор загрузки представляет собой зеленый блок div внутри серого div-а. Зеленая полоска постепенно должна закрыть собой серую. Запускается эта анимация, кликом по кнопке Пуск, у тега button значение атрибута onclick, такое же как и название функции – move.

Как сделать прогресс бар.

<div id="greyProgress">
  <div id="greenBar">10%</div>
</div>
<br>
<button onclick="move()">Пуск</button>

CSS стилизация

Серая полоса на всю ширину браузера.

#greyProgress {
  width: 100%;
  background-color: #ddd;
}

В состоянии покоя, зеленая полоса занимает 10% ширины относительно серой.

#greenBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

JS код

JavaScript заставит двигаться зеленую полоску до конца с весело меняющимися процентами.Создадим функцию с названием move, которая получит элемент (elem) с id greenBar (зеленая полоска).

function move() {
  var elem = document.getElementById("greenBar");

Объявим переменную width, приравненную к числовому значению 10.

var width = 10;

Переменная с названием id содержит метод setInterval с двумя аргументами, frame (ещё одна функция) и 10 (время задержки в милисекундах). Задержка нужна для того, чтобы вы видели эффект. Метод setInterval, запускает функцию с интервалом в 10 мс.

var id = setInterval(frame, 10);
  function frame() {

Функция frame состоит из условия, при котором если ширина больше или равна 100, тогда надо остановить исполнение функции, вызвав метод clearInterval, который прекращает запланированное исполнение кода, установленное методом setInterval.

if (width >= 100) {

На практике это означает, что как только зеленая полоска дойдет до 100 процентов, задание выполнено и необходимо его остановить.

clearInterval(id);

В противном случае, надо инкрементировать ширину. Это когда, два знака "++", увеличивают значение переменной width на 1.

} else {   width++;

Здесь мы уточняем, что ширина, указанная в стилях у элемента c id greenBar (elem), будет увеличиваться на 1%.

elem.style.width = width + '%';

Эта строка создает эффект прибавления процентов на прогресс баре.

    elem.innerHTML = width * 1 + '%';
  }
 }
}

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.