Bagaimana Membuat Bar Kemajuan dalam HTML?

Bar kemajuan digunakan untuk menentukan tonggak tertentu semasa tugas mencapai peratusan. Anda boleh membuat bar kemajuan di yang menentukan kemajuan penyelesaian sesuatu tugas. Nilai bar kemajuan boleh dimanipulasi dengan JavaScript. Dalam artikel ini, kita akan melihat bagaimana anda dapat membuat bar kemajuan dengan bantuan HTML, CSS, dan JavaScript dalam urutan berikut:

• Bagaimana Membuat Bar Kemajuan dalam HTML?
• Bar Kemajuan: Contoh

Mari kita mulakan.

Bagaimana Membuat Bar Kemajuan dalam HTML?

Bar Kemajuan menggambarkan kemajuan tugas yang sedang dijalankan. Secara amnya, bar ini digunakan untuk menunjukkan status muat turun dan muat naik. Kita boleh mengatakan bahawa Bar Kemajuan boleh digunakan untuk menggambarkan status apa sahaja yang sedang berlangsung.

Untuk membuat Progress Bar asas menggunakan , langkah-langkah berikut perlu dilakukan:

• Buat struktur HTML untuk bar kemajuan anda - HTML teg menentukan kemajuan penyelesaian tugas.

• Menambah CSS - Langkah seterusnya adalah menambahkan warna latar bar kemajuan serta status kemajuan di bar dengan bantuan CSS .

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

• Menambah JavaScript - Langkah seterusnya adalah membuat bar progess animasi dinamik menggunakan fungsi javascript kemas kini dan pemandangan .

kemas kini fungsi () {var element = document.getElementById ('myprogressBar') var lebar = 1 var identiti = setInterval (pemandangan, 10) adegan fungsi () {if (lebar> = 100) {clearInterval (identiti)} lain {lebar ++ element.style.width = lebar + '%'}}}

Sekarang setelah anda mengetahui pelbagai langkah untuk membuat bar kemajuan, mari kita teruskan dan lihat contoh lengkap bar kemajuan.

Bar Kemajuan: Contoh

Setelah anda menyelesaikan pelbagai langkah untuk membuat bar kemajuan, sudah tiba masanya untuk menghubungkan HTML, CSS dan Elemen JavaScript . Contoh berikut menunjukkan kod bar kemajuan yang lengkap yang menghubungkan perkara di atas HTML, CSS dan JavaScript Kod:

#Progress_Status {lebar: warna latar belakang 50%: #ddd} #myprogressBar {lebar: tinggi 2%: warna latar 20 piksel: # 4CAF50}
Contoh Bar Kemajuan Menggunakan JavaScript
 
Muat turun Status Fail:
  
Mula Muat turun fungsi kemas kini () {var element = document.getElementById ('myprogressBar') var width = 1 var identiti = setInterval (scene, 10) function function () {if (width> = 100) {clearInterval (identiti)} lain {width ++ element.style.width = lebar + '%'}}}

Pengeluaran:

Dengan ini, kami telah sampai ke akhir artikel kami. Saya harap anda memahami pelbagai langkah yang diperlukan untuk membuat bar kemajuan.

Lihat kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini menjadikan anda mahir dalam kemahiran bekerja dengan teknologi web back-end dan front-end. Ia merangkumi latihan mengenai Pembangunan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.

Ada soalan untuk kami? Sila sebutkan di bahagian komen blog ini dan kami akan menghubungi anda.

tali senar awam ()