Bar Kemajuan HTML-html tutorial-php.cn

Bar Kemajuan HTML

王林

Lepaskan： 2024-09-04 16:47:37

asal

911 orang telah melayarinya

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 tag, mewakili penggunaan ruang cakera. Dan Ia disokong dalam HTML5, dan pertumbuhan berterusan HTML5 membantu memperkenalkan alat yang menarik.

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Output:

Bar Kemajuan HTML

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>

Salin selepas log masuk

Output:

Bar Kemajuan HTML

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>

Salin selepas log masuk

Output:

Bar Kemajuan HTML

Nota: Penyemak imbas yang berbeza mengendalikan bar dengan sedikit variasi. Chrome menggunakan Lembaran Gaya Webkit dengan menggantikan gaya asli.

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>

Salin selepas log masuk

Output:

Bar Kemajuan HTML

4. Menggunakan Contoh JavaScript

Peraturan berikut perlu dilakukan menggunakan javascript. Mencipta

elemen jika perlu dan seterusnya mencipta helaian gaya, akhirnya membenamkannya bersama-sama. Kod di bawah menunjukkan bar kemajuan asas dengan JavaScript.

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>

Salin selepas log masuk

Output:

Bar Kemajuan HTML

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>

Salin selepas log masuk

Output:

Bar Kemajuan HTML

NOTE: Even you can add some animation effects to the progress bar. To do so, we have to assign some interval timings by assigning some value to it and directing incrementing infinitely, to make the situation control conditional statement used.

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!