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

Раздел языка JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2028
Поблагодарили: 62 раза

Отображение прогресса выполняемой задачи (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 раз в секунду. Если есть необходимость увеличить или уменьшить время прогресса, то следует менять именно эту цифру.

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

Вернуться в «JavaScript»

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

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