Траке напретка користе се за одређивање одређених прекретница током задатка у процентима. Можете да направите траку напретка у која одређује напредак у извршењу задатка. Вредношћу траке напретка може се манипулисати помоћу ЈаваСцрипт-а. У овом чланку ћемо видети како можете да направите траку напретка уз помоћ ХТМЛ-а, ЦСС-а и ЈаваСцрипт-а у следећем низу:
Почнимо.
Како направити траку напретка у ХТМЛ-у?
Трака напретка приказује напредак било ког задатка који се извршава. Генерално се ове траке користе за приказ статуса преузимања и отпремања. Можемо рећи да се траке напретка могу користити за приказ статуса било чега што је у току.
Да бисте креирали основну траку напретка помоћу , потребно је извршити следеће кораке:
- Направите ХТМЛ структуру за траку напретка - ХТМЛ ознака одређује напредак завршетка задатка.
- Додавање ЦСС-а - Следећи корак је додавање боје позадине траке напретка као и статуса напредовања траке уз помоћ ЦСС .
#Прогресс_Статус {видтх: 50% бацкгроунд-цолор: #ддд} #мипрогрессБар {видтх: 1% хеигхт: 35пк бацкгроунд-цолор: # 4ЦАФ50 тект-алигн: центер-хеигхт: 32пк цолор: блацк}- Додавање ЈаваСцрипт-а - Следећи корак је стварање динамичке анимиране прогес траке помоћу јавасцрипт функције ажурирање и сцена .
упдате функције () {вар елемент = доцумент.гетЕлементБиИд ('мипрогрессБар') вар видтх = 1 вар идентити = сетИнтервал (сцене, 10) фунцтион сцене () {иф (видтх> = 100) {цлеарИнтервал (идентити)} елсе {видтх ++ елемент.стиле.видтх = ширина + '%'}}}Сада када знате различите кораке за креирање траке напретка, идемо даље и погледајте комплетан пример траке напретка.
Питања о интервјуу у облаку за Салесфорце Сервице
Трака напретка: Пример
Када завршите различите кораке за креирање траке напретка, време је да повежете ХТМЛ, ЦСС и ЈаваСцрипт елементи . Следећи пример приказује комплетан код траке напретка који повезује горе наведено ХТМЛ, ЦСС и ЈаваСцрипт Кодови:
#Прогресс_Статус {видтх: 50% бацкгроунд-цолор: #ддд} #мипрогрессБар {видтх: 2% хеигхт: 20пк бацкгроунд-цолор: # 4ЦАФ50}Пример траке напретка помоћу ЈаваСцрипт-а
Статус преузимања датотеке:
Започните Преузимање функције ажурирања () {вар елемент = доцумент.гетЕлементБиИд ('мипрогрессБар') вар видтх = 1 вар идентити = сетИнтервал (сцене, 10) фунцтион сцене () {иф (видтх> = 100) {цлеарИнтервал (идентити)} елсе {ширина ++ елемент.стиле.видтх = ширина + '%'}}}Излаз:
Овим смо дошли до краја нашег чланка. Надам се да сте разумели различите кораке потребне за стварање траке напретка.
Погледајте наш која долази са обуком уживо коју воде инструктори и искуством у стварном животу. Овај тренинг чини вас вештима за рад са позадинским и предњим веб технологијама. Укључује обуку о веб-развоју, јКуери-ју, Ангулар-у, НодеЈС-у, ЕкпрессЈС-у и МонгоДБ-у.
Имате питање за нас? Молимо вас да га спомињете у одељку за коментаре на овом блогу и јавићемо вам се.