Kā izveidot progresa joslu HTML?

Norises joslas tiek izmantotas, lai noteiktu procentus uzdevuma laikā. Jūs varat izveidot progresa joslu kas norāda uzdevuma izpildes gaitu. Ar progresa joslas vērtību var manipulēt ar JavaScript. Šajā rakstā mēs redzēsim, kā jūs varat izveidot progresa joslu ar HTML, CSS un JavaScript palīdzību šādā secībā:

• Kā izveidot progresa joslu HTML?
• Progresa josla: piemērs

Sāksim.

Kā izveidot progresa joslu HTML?

Progresa josla attēlo jebkura veicamā uzdevuma gaitu. Parasti šīs joslas tiek izmantotas, lai parādītu lejupielādes un augšupielādes statusu. Mēs varam teikt, ka progresa joslas var izmantot, lai attēlotu visa notiekošā statusu.

Lai izveidotu pamata progresa joslu, izmantojot , jāveic šādas darbības:

• Izveidojiet HTML struktūru progresa joslai - HTML tagu norāda uzdevuma izpildes gaitu.

• CSS pievienošana - Nākamais solis ir ar progr palīdzību pievienot progresa joslas fona krāsu, kā arī joslas progresa statusu 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 pievienošana - Nākamais solis ir izveidot dinamisku animētu progresa joslu, izmantojot javascript funkcijas Atjaunināt un aina .

funkciju atjauninājums () {var elements = document.getElementById ('myprogressBar') var width = 1 var identitāte = setInterval (aina, 10) funkciju aina () {if (width> = 100) {clearInterval (identitāte)} else {width ++ element.style.width = width + '%'}}}

Tagad, kad zināt dažādus soļus, lai izveidotu progresa joslu, turpināsim un apskatīsim pilnīgu progresa joslas piemēru.

Progresa josla: piemērs

Kad esat veicis dažādas darbības, lai izveidotu progresa joslu, ir pienācis laiks saistīt HTML, CSS un JavaScript elementi . Šajā piemērā parādīts viss progresa joslas kods, kas savieno iepriekš minēto HTML, CSS un JavaScript Kodi:

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
Progresa joslas piemērs, izmantojot JavaScript
 
Faila lejupielādes statuss:
  
Sāciet lejupielādes funkcijas atjaunināšanu () {var element = document.getElementById ('myprogressBar') var width = 1 var identitāte = setInterval (aina, 10) funkcijas aina () {if (width> = 100) {clearInterval (identitāte)} cits {width ++ element.style.width = width + '%'}}}

Izeja:

atrast lielāko skaitu masīva java

Ar to mēs esam nonākuši mūsu raksta beigās. Es ceru, ka jūs sapratāt dažādas darbības, kas nepieciešamas, lai izveidotu progresa joslu.

Pārbaudiet mūsu kas nāk ar instruktoru vadītu tiešraides apmācību un reālās dzīves projektu pieredzi. Šīs apmācības ļauj jums prasmīgi strādāt ar aizmugurējām un priekšējām tīmekļa tehnoloģijām. Tas ietver apmācību par Web izstrādi, jQuery, Angular, NodeJS, ExpressJS un MongoDB.

Vai mums ir jautājums? Lūdzu, pieminējiet to šī emuāra komentāru sadaļā, un mēs ar jums sazināsimies.