Hogyan lehet előrehaladási sávot létrehozni a HTML-ben?

A folyamatjelző oszlopokkal meghatározhatók bizonyos mérföldkövek a feladat során százalékos arányban. Létrehozhat egy folyamatjelző sávot amely meghatározza a feladat befejezésének előrehaladását. A folyamatjelző sáv értéke a JavaScript segítségével manipulálható. Ebben a cikkben megtudjuk, hogyan hozhat létre előrehaladási sávot HTML, CSS és JavaScript segítségével a következő sorrendben:

• Hogyan lehet előrehaladási sávot létrehozni a HTML-ben?
• Progress Bar: Példa

Kezdjük.

Hogyan lehet előrehaladási sávot létrehozni a HTML-ben?

A Haladási sáv a végrehajtott feladatok előrehaladását mutatja be. Általában ezeket a sávokat használják a letöltés és feltöltés állapotának megjelenítésére. Mondhatjuk, hogy a Haladási sávok felhasználhatók a folyamatban lévő állapotok ábrázolására.

hogyan rendezzünk egy tömböt c ++

Alapszintű előrehaladási sáv létrehozása a , a következő lépéseket kell végrehajtani:

• HTML-struktúra létrehozása a haladási sávhoz - A HTML címke meghatározza a feladat befejezésének előrehaladását.

• CSS hozzáadása - A következő lépés a folyamatjelző sáv háttérszínének, valamint a sáv előrehaladásának állapotának hozzáadása a 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 hozzáadása - A következő lépés egy dinamikus animált progessáv létrehozása a javascript funkciók frissítés és színhely .

function update () {var elem = document.getElementById ('myprogressBar') var width = 1 var identitás = setInterval (jelenet, 10) function scene () {if (width> = 100) {clearInterval (identitás)} else {width ++ element.style.width = width + '%'}}}

Most, hogy ismeri az előrehaladási sáv létrehozásának különböző lépéseit, lépjünk tovább, és nézzük meg a folyamatjelző sáv teljes példáját.

Progress Bar: Példa

Miután elvégezte az előrehaladási sáv létrehozásának különböző lépéseit, itt az ideje összekapcsolni a HTML-t, a CSS-t és a JavaScript elemek . Az alábbi példa a fentieket összekapcsoló előrehaladási sáv teljes kódját mutatja HTML, CSS és JavaScript Kódok:

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
Példa a haladássávra a JavaScript használatával
 
Fájl letöltése állapota:
  
Indítsa el a letöltés funkciófrissítést () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {szélesség ++ elem.stílus.szélesség = szélesség + '%'}}}

Kimenet:

Ezzel a cikkünk végére értünk. Remélem, megértette az előrehaladási sáv létrehozásához szükséges különböző lépéseket.

Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiák használatának képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.

Van egy kérdésünk? Kérjük, említse meg ennek a blognak a megjegyzés rovatában, és mi kapcsolatba lépünk Önnel.