Как да създам лента за напредък в HTML?

Лентите за напредъка се използват за определяне на определени етапи по време на задача до процент. Можете да създадете лента за напредък в който определя напредъка на изпълнението на дадена задача. Стойността на лентата за напредъка може да се манипулира от JavaScript. В тази статия ще видим как можете да създадете лента за напредъка с помощта на HTML, CSS и JavaScript в следната последователност:

• Как да създам лента за напредък в HTML?
• Лента за напредъка: Пример

Нека да започнем.

Как да създам лента за напредък в HTML?

Лентата за напредъка показва напредъка на всяка задача, която се изпълнява. Обикновено тези ленти се използват за показване на състоянието на изтегляне и качване. Можем да кажем, че лентите за напредък могат да се използват за изобразяване на състоянието на всичко, което е в ход.

как да сортирам масив c ++

За да създадете основна лента за напредъка с помощта на , трябва да се извършат следните стъпки:

• Създайте HTML структура за вашата лента за напредък - HTML етикет указва хода на изпълнение на задача.

• Добавяне на CSS - Следващата стъпка е да добавите цвят на фона на лентата за напредъка, както и състоянието на напредъка в лентата с помощта на CSS .

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}

• Добавяне на JavaScript - Следващата стъпка е да се създаде динамична анимирана прогесова лента с помощта javascript функции актуализиране и сцена .

актуализация на функция () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = ширина + '%'}}}

Сега, след като знаете различните стъпки за създаване на лента за напредъка, нека продължим напред и да разгледаме пълния пример за лента за напредъка.

Лента за напредъка: Пример

След като завършите различните стъпки за създаване на лента за напредък, е време да свържете HTML, CSS и JavaScript елементи . Следващият пример показва пълния код на лентата на напредъка, свързващ горното HTML, CSS и JavaScript Кодове:

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
Пример за лента за напредъка с помощта на JavaScript
 
Изтегляне на състояние на файл:
  
Стартиране на актуализация на функцията за изтегляне () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}

Изход:

С това стигнахме до края на нашата статия. Надявам се, че сте разбрали различните стъпки, необходими за създаване на лента за напредъка.

Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.

Имате въпрос към нас? Моля, споменете го в раздела за коментари на този блог и ние ще се свържем с вас.