Indikátory priebehu sa používajú na určenie určitých míľnikov počas úlohy na určité percento. Lištu postupu môžete vytvoriť v ktorý určuje priebeh dokončenia úlohy. S hodnotou ukazovateľa priebehu je možné manipulovať pomocou JavaScriptu. V tomto článku sa dozvieme, ako môžete vytvoriť indikátor priebehu pomocou kódov HTML, CSS a JavaScript v nasledujúcom poradí:
Poďme začať.
Ako vytvoriť indikátor priebehu v HTML?
Ukazovateľ priebehu zobrazuje priebeh každej úlohy, ktorá sa vykonáva. Tieto pruhy sa spravidla používajú na zobrazenie stavu sťahovania a nahrávania. Môžeme povedať, že ukazovatele priebehu možno použiť na zobrazenie stavu všetkého, čo práve prebieha.
Ak chcete vytvoriť základný indikátor priebehu pomocou , je potrebné vykonať tieto kroky:
- Vytvorte štruktúru HTML pre svoj indikátor priebehu - HTML značka určuje postup dokončenia úlohy.
- Pridávanie CSS - Ďalším krokom je pridať farbu pozadia ukazovateľa priebehu, ako aj stav priebehu v ukazovateli pomocou ukazovateľa CSS .
#Progress_Status {šírka: 50% farba pozadia: #ddd} #myprogressBar {šírka: 1% výška: 35 pixelov farba pozadia: # 4CAF50 zarovnanie textu: výška stredovej čiary: 32 pixelov farba: čierna}- Pridáva sa JavaScript - Ďalším krokom je vytvorenie dynamického animovaného pruhu postupu pomocou funkcie javascript aktualizovať a scéna .
aktualizácia funkcie () {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 + '%'}}}Teraz, keď poznáte rôzne kroky na vytvorenie indikátora priebehu, poďme ďalej a pozrime sa na kompletný príklad indikátora priebehu.
Ukazovateľ priebehu: Príklad
Po dokončení rôznych krokov na vytvorenie indikátora priebehu je čas prepojiť súbory HTML, CSS a Prvky JavaScriptu . Nasledujúci príklad ukazuje kompletný kód ukazovateľa priebehu prepájajúci vyššie uvedené HTML, CSS a JavaScript Kódy:
#Progress_Status {šírka: 50% farba pozadia: #ddd} #myprogressBar {šírka: 2% výška: 20px farba pozadia: # 4CAF50}Príklad indikátora priebehu pomocou JavaScriptu
Stav stiahnutia súboru:
čo je nadmerné vybavenie v strojovom učení
Spustiť sťahovanie funkcie update () {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 + '%'}}}Výkon:
Týmto sme sa dostali na koniec nášho článku. Dúfam, že ste pochopili rôzne kroky potrebné na vytvorenie indikátora postupu.
Vyskúšajte naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie umožňuje získať zručnosti na prácu s webovými technológiami typu back-end a front-end. Zahŕňa školenie zamerané na vývoj webových aplikácií, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás otázku? Uveďte to prosím v sekcii komentárov tohto blogu a my sa vám ozveme.