Rumah >hujung hadapan web >html tutorial >Bar Kemajuan HTML
Bar Kemajuan HTML
- 王林asal
- 2024-09-04 16:47:37986semak imbas
Standard W3C menentukan bahawa bar kemajuan melengkapkan tugas tertentu menggunakan elemen kemajuan. Pembangun menggunakan teg kemajuan untuk memaparkan bar kemajuan dan mewakili kemajuan muat naik fail pada halaman web. HTML menggabungkan teg ini, menawarkan pembangun web kaedah mudah untuk memaparkan bar. Teg ini berbeza sepenuhnya daripada
Sintaks:
Elemen kemajuan ini mempunyai kedua-dua teg permulaan dan penamat, dan di bawah menunjukkan sintaks asas teg. Ia membayangkan status sebarang proses. Bar kemajuan mempunyai adab paparan sebaris.
<Progress bar> …… </Progress bar>
Atribut
Atribut menyediakan elemen bermaklumat seperti gelagat peneroka dalam HTML. Terdapat tiga atribut dalam HTML: atribut acara dan atribut global. Selain atribut ini, elemen kemajuan mempunyai dua atribut baharu:
maks – Nilai lalai ialah 1.0 dan menunjukkan jumlah bilangan kerja yang diperlukan untuk menyelesaikan tugasan.
nilai – Ini menentukan jumlah kerja yang perlu diselesaikan. Nilai lalai ditetapkan sebagai kurang daripada 1.0. Sekiranya tiada atribut Val, bar kemajuan tidak dapat ditentukan.
Contoh bar kemajuan termasuk melampirkan fail, memuatkan dokumen untuk kali pertama atau memuatkan halaman web.
Kaedah untuk Mencipta Bar Kemajuan dalam HTML
Bar kemajuan mempunyai dua keadaan berbeza: tentu dan tak tentu. Dalam kes bar kemajuan tidak tentu, anda menetapkan nilai nol kepada atribut nilai, yang menjadikannya lebih mudah untuk digayakan. Sebaliknya, untuk keadaan penentu, anda mentakrifkan dua atribut baharu, maks dan nilai, seperti yang ditunjukkan dalam contoh di bawah. Ia menggunakan beberapa penampilan seperti gerakan untuk menunjukkan tugas dengan bar mendatar. Jika kerja masing-masing tidak bergantung pada tugas, maka < meter> tag diberikan. Mengenai keserasian penyemak imbas, ia menyokong semua pelayar kecuali Internet Explorer (sokongan separa). Bergantung pada bar kemajuan keserasian penyemak imbas mungkin kelihatan berbeza. Artikel ini akan menumpukan pada keadaan penentu bar dengan atribut maks dan Val.
Contoh: Sekarang, mari lihat pelaksanaan asas bar kemajuan dengan atribut min dan val.
<!DOCTYPE html> <html> <body> Downloading on process: <progress value="19" max="90"> </progress> <p><strong>Note:</strong> The progress tag is used to represent a progress bar for quite period of time. </p> </body> </html>
Output:
1. Menggunakan CSS
Seterusnya, kita akan melihat cara membuat bar kemajuan yang bergaya kelihatan konsisten pada semua platform. Untuk menanda bar kemajuan, kami menggunakan pemilih nilai dan melaraskan dimensi, seperti lebar dan ketinggian elemen kemajuan, untuk mencipta bar kemajuan yang menarik secara visual. Walau bagaimanapun, berurusan dengan pelayar yang berbeza boleh merumitkan proses ini. Penyemak imbas membuat beberapa pelarasan pada kaliber penyiapan tugas. Kami menjadikan bar html kelihatan jujur dengan menggunakan kesan dimensi.
Contoh:
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:400px;height:40px}
</style>
</head>
<body>
<progress value="60" max="100"></progress>
</body>
</html>
Output:
2. Menggunakan Bayang dan Warna Kotak
Dengan lembaran gaya, kita boleh menambah peraturan gaya pada elemen ini dengan memberikan warna latar belakang, menetapkan ketinggian, dsb. Warna boleh digunakan dengan menggunakan fungsi rgba(). Elemen bar kemajuan boleh dilakukan dengan warna yang berbeza untuk memaparkan hasil yang baik. Ini dipetakan dengan atribut 'class'. Secara amnya, bar kemajuan bergerak dari kiri ke kanan untuk menunjukkan tugas apabila ia bermula dari '0' awal dan memaparkan keputusan sebaik sahaja ia mencapai sasaran.
Contoh:
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar demo </h1>
<style>
progress{width:200px;height:20px;background-color:pink;
border-radius: 4px;position: absolute;
right: 0px;
top: 80px;
box-shadow: 0 3px 6px rgba(255, 255, 0, 255) inset;}
</style>
</head>
<body>
<progress value="40" max="100"></progress>
</body>
</html>
Output:
Sampel:
bar kemajuan :: – WebKit-Progress-bar
Malah saiz bar kemajuan boleh diubah dengan kecil, sederhana dan besar menggunakan atribut kelas.
3. Menggunakan Span
Kod di bawah tidak tentu, menunjukkan beberapa proses sedang berjalan untuk seketika.
Contoh:
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:120px;height:20px}
</style>
</head>
<body>
<progress max="100">
<span>20</span>%
</progress>
</body>
</html>
Output:
4. Menggunakan Contoh JavaScript
Peraturan berikut perlu dilakukan menggunakan javascript. Mencipta
Contoh #1
<!DOCTYPE>
<html>
<body>
<script>
var pgx=2;
function bar(){
var prog = document.getElementById ('progress demo');
setInterval (function ()
{
if(pgx<90){
pgx++;
prog.value =pgx;
}
bar();
}, 100);
}
</script>
<progress id="progress demo" min="2" max="100"></progress>
<br/><br/>
<button onclick="bar()"> submit</button>
</body>
</html>
Output:
Contoh #2
<!DOCTYPE html>
<html lang="en">
<head>
<title>implementation of HTML progress Tag</title>
</head>
<body>
<h2> <i>Task in scheduled Progress </i></h2>
<p>Process: <progress id="bar" value="1" max="100"><span>0</span>%</progress></p>
<script type="text/javascript">
var k = 0;
var progb = document.getElementById("bar");
function count(){
if(k < 100){
k = k + 1;
progb.value = k;
progb.getElementsByTagName("span")[0].textContent = k;
}
setTimeout("count()", 400);
}
count();
</script>
</body>
</html>
Output:
Conclusion
Therefore, this article explains how to create a highly flexible and lightweight HTML progress bar. Finally, we have briefly seen the concept as the activity indicator. This element indicates how to load a page or make some registration process and probably represents a percentage of 100 for the max value. When the length of the time task is unknown, developers usually use this mode in the installation or loading page scenario. And that’s even an implementation using Html5 with some cool effects.
Atas ialah kandungan terperinci Bar Kemajuan HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!