11:37 12.06.2017
Решил, для примера, написать простой скрипт (JS), который отображал бы текущий процент выполнения, какой то задачи. В моем примере будет просто заполняться полоса до полного, а рядом счетчик процентов, до 100%.
Для данного прогресса, я использовал HTML тег <progress>, чье предназначение отображать завершение выполнения задачи.
В JS использовал функции: setInterval (постоянное выполнение кода) и clearInterval (остановка функции setInterval), а так же другие функции для передачи значений атрибутов в теги.
Переходи к самому коду. Так выглядит HTML код:
И JavaScript (код прокомментировал, для понимания, что к чему):
Цифра
Надеюсь мой пост оказался Вам полезен.
Спасибо за внимание.
Для данного прогресса, я использовал 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 раз в секунду. Если есть необходимость увеличить или уменьшить время прогресса, то следует менять именно эту цифру.Надеюсь мой пост оказался Вам полезен.
Спасибо за внимание.
- Жалоба