Jak stworzyć pasek postępu w HTML?

Paski postępu służą do określania określonych punktów kontrolnych podczas zadania w procentach. Możesz utworzyć pasek postępu w programie który określa postęp realizacji zadania. Wartością paska postępu można manipulować za pomocą JavaScript. W tym artykule zobaczymy, jak utworzyć pasek postępu za pomocą HTML, CSS i JavaScript w następującej kolejności:

• Jak stworzyć pasek postępu w HTML?
• Pasek postępu: przykład

Zaczynajmy.

Jak stworzyć pasek postępu w HTML?

Pasek postępu przedstawia postęp każdego wykonywanego zadania. Zwykle te paski są używane do wyświetlania stanu pobierania i wysyłania. Można powiedzieć, że paski postępu mogą służyć do zobrazowania stanu wszystkiego, co jest w toku.

przełącznik w przykładowych programach Java

Aby utworzyć podstawowy pasek postępu za pomocą należy wykonać następujące czynności:

• Utwórz strukturę HTML dla paska postępu - HTML etykietka określa postęp realizacji zadania.

• Dodawanie CSS - Następnym krokiem jest dodanie koloru tła paska postępu, a także stanu postępu na pasku za pomocą CSS .

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

• Dodanie JavaScript - Następnym krokiem jest utworzenie dynamicznego animowanego paska postępu za pomocą funkcje javascript aktualizacja i scena .

function update () {element var = document.getElementById ('myprogressBar') var width = 1 var tożsamość = setInterval (scena, 10) function scene () {if (width> = 100) {clearInterval (tożsamość)} else {width ++ element.style.width = width + '%'}}}

Teraz, gdy znasz już różne kroki tworzenia paska postępu, przejdźmy dalej i spójrzmy na pełny przykład paska postępu.

Pasek postępu: przykład

Po wykonaniu różnych kroków tworzenia paska postępu nadszedł czas na połączenie HTML, CSS i Elementy JavaScript . Poniższy przykład przedstawia pełny kod paska postępu łączący powyższe HTML, CSS i JavaScript Kody:

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
Przykład paska postępu za pomocą JavaScript
 
Stan pobierania pliku:
  
Rozpocznij pobieranie, funkcja update () {element var = document.getElementById ('myprogressBar') var width = 1 var tożsamość = setInterval (scena, 10) function scene () {if (width> = 100) {clearInterval (tożsamość)} else {width ++ element.style.width = width + '%'}}}

Wynik:

W ten sposób dotarliśmy do końca naszego artykułu. Mam nadzieję, że rozumiesz różne kroki wymagane do utworzenia paska postępu.

Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.

Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na tym blogu, a my skontaktujemy się z Tobą.