Уроки JavaScript Практика #13 Прогресс бар. Как управлять?

В данном видео уроке мы рассмотрим что такое прогресс бар и управление им с помощью языка программирования JavaScript.

========================================================
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
========================================================

========================================================

[Design.Sospeso]

Те кто будут разбирать функцию чтобы ПОНЯТЬ! и может вспомнить что проходили ранее но подзабыли..
итак что Вам может быть не понятно:
var id = setInterval(frame, 10);
frame - это функция, которая наисана на следующей строке,
10 - это миллисекунды - задержка выполнения чтобы вы видели эффект, если бы не было задержки - то не было бы эффекта width++
clearInterval(id) - прекращает выполнение setInterval
= width*1 + '%'; - эта строка просто добавляет эффект прибавления цифр на экране. Если вы удалите эту строку то на экране так и будет 10% и ничего прибавляться не будет
и не понятно зачем было width*1 автор ролика как всегда молчит как партизан в ролике)
Автор как всегда комментирует "вот я пишу такие буковки" но не объясняет "для чего я пишу именно это" - блин ну реально уже который выпуск смотрю и сам трачу час чтобы разобраться, а ведь можно было бы это время сэкономить. Ну реально дружище, ты как деревянный тебе в каждом видео кричат уже - "ОБЪЯСНЯЙ ДЛЯ ЧЕГО ТЫ ПИШЕШЬ ТО ИЛИ ИННОЕ" а то так и будет 7 тысяч подписчиков, ведь не подписываются потому что не понимают что ты пишешь зачем... ты просто набираешь буковки и все. можно тупо выкладывать код и показывать результат - кпд будет такое же как после просмотра того как ты печатаешь буквы.

[Ivan-rcit]

кто то заметил особенность у этой функции, если в этой строке var id = setInterval(frame, 10); увеличить задержку например до 100 и запустить программу и пока прогресс не дошел до 100%, нажать еще на Click то запустить параллельно вторая копия и на экране будут выводится попеременно результаты. Так можно запустить и три, четыре и далее раз.

[rimm]

подскажите пожалуйста урок по созданию кастомного скролл бара на js.Не плагин только, а самостоятельное создание.

[ed]

Здравствуйте!
А можете записать уроки с событием scroll... К примеру scalle блоков при scroll. Или к примеру появление блоков-infinite scroll. Заранее спасибо! Кстати уроки действительно очень практичные.Вместо теории смотреть практику очень круто.. Ну наверно когда более имение знаешь ее(теорию). Продолжайте в том же направлении.

[Galaktikaa]

Так как можно реализовать идентификацию пользователей и запоминания числового значения для продолжения начисление и заполнения дальше прогресс бара после закрытия страницы?

[konstantinkkk]

хотелось бы такой же прогресс только когда работаешь с объектами upload readystatechange, что б показывало на самом деле сколько уже загрузилось файла а сколько осталось. А то это получается просто для красоты сделано.

[yrka]

А можно же вместо ById изпользовать querySelector("#bar")?

[maktor]

скрываем по завершении
function move() {
let elem =
let width = 10;
let id = setInterval(frame, 10);

function frame() {
if (width >= 100) {
clearInterval(id);
= 'none';
} else {
width++;
elem.style.width = width +'%';
= width +'%';
= 'block';
}
}
return;
}

[МаксимДаценко-кб]

Что за программу используете для написания кода?

[anton]

долго я искал как в jquery приравнять element.style.width=)

[dizlike]

надо с requestAnimationFrame();
let elem =
let label =
let width = 0;
function frame () {
width++;
elem.style.width = `${width}%`;
label.innerHTML = `${width}%`;
if(width < 100){
requestAnimationFrame(frame);
}
}
window.onload = frame;

[karpoc]

А может кто нибудь подсказать как сделать похожее но только чтоб он шел и интервалом в 10 и надо было каждый раз нажимать на кнопку?

[aibeksydygaliev]

Если у Вас не заработало, то здесь правильные коды

[KvantGD]

Дизлайк не буду ставить но у меня ничего не получилось:(