Отображение прогресса выполняемой задачи (JavaScript)

Раздел языка JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2080
Зарегистрирован: Сб авг 11, 2012 7:39 am
Поблагодарили: 67 раз

Отображение прогресса выполняемой задачи (JavaScript)

Сообщение Slash » Чт окт 06, 2016 8:05 pm

Здравствуйте.
Решил, для примера, написать простой скрипт (JS), который отображал бы текущий процент выполнения, какой то задачи. В моем примере будет просто заполняться полоса до полного, а рядом счетчик процентов, до 100%.

Для данного прогресса, я использовал HTML тег <progress>, чье предназначение отображать завершение выполнения задачи.
В JS использовал функции: setInterval (постоянное выполнение кода) и clearInterval (остановка функции setInterval), а так же другие функции для передачи значений атрибутов в теги.

Переходи к самому коду. Так выглядит HTML код:

Код: Выделить всё

<progress max="100" value="0" id="processing"></progress> <span id="percent">0</span>% 
И JavaScript (код прокомментировал, для понимания, что к чему):

Код: Выделить всё

<script type="text/javascript">
var num = 0;
function timer() {
    if (num < 100) { // Проверяем значение переменной "num" (меньше 100 или нет)
        // Если значение переменной меньше 100, то выполняем код из следующих двух строк:
        num++; // Прибавляем один
        document.getElementById('processing').value = num; // Изменяем значение атрибута "value"
        document.getElementById('percent').innerHTML = num; // Изменяем цифру рядом с процессом
    }
    else {
        // Если значение переменной "num" 100
        // Останавливаем повторное выполнение функции "timer"
        clearInterval(counter); 
    };
};

var counter = setInterval(timer, 100); 
</script>
Цифра 100, написанная в функции setInterval, задает интервал выполнения функции timer в миллисекундах, то есть функция timer будет выполняться 10 раз в секунду. Если есть необходимость увеличить или уменьшить время прогресса, то следует менять именно эту цифру.

Надеюсь мой пост оказался Вам полезен.
Спасибо за внимание.

Реклама

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость