Bagaimana untuk melaksanakan bar kemajuan dalam javascript

Bar kemajuan ialah komponen UI biasa, biasanya digunakan untuk memaparkan kemajuan tugas atau operasi. Dalam banyak aplikasi web, bar kemajuan diperlukan untuk membolehkan pengguna memahami dengan lebih baik kemajuan tugas semasa, sekali gus meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara melaksanakan bar kemajuan menggunakan JavaScript.

1. Buat bar kemajuan asas menggunakan HTML dan CSS
Dalam HTML, anda boleh menggunakan elemen Dengan menetapkan atribut nilai dan atribut maks kepada elemen, anda boleh menentukan tahap penyiapan bar kemajuan. Sebagai contoh, dengan mengandaikan kita perlu mencipta bar kemajuan dengan nilai maksimum 100, dan tahap penyelesaian semasa ialah 50, kita boleh menulisnya seperti ini:

<progress value="50" max="100"></progress>

Seterusnya, kita perlu menggunakan gaya CSS untuk mencantikkan bar kemajuan. Anda boleh menetapkan warna latar belakang untuk elemen serta elemen pseudo untuk mensimulasikan kemajuan bar kemajuan. Sebagai contoh, gaya berikut menetapkan ketinggian bar kemajuan kepada 20 piksel, warna latar belakang kepada kelabu muda dan warna kemajuan kepada hijau gelap:

progress {
  height: 20px;
  background-color: #f5f5f5;
}

progress::-webkit-progress-value {
  background-color: #2ecc71;
}

Unsur pseudo ::-webkit- kemajuan digunakan di sini -nilai untuk menentukan warna bar kemajuan. Dalam aplikasi sebenar, gaya lain juga boleh disesuaikan mengikut keperluan sebenar.

2. Gunakan JavaScript untuk mengawal tahap penyiapan bar kemajuan
Bar kemajuan asas boleh dibuat melalui kaedah di atas, tetapi tahap penyiapan bar kemajuan adalah statik dan tidak boleh dilaraskan secara dinamik. Seterusnya, kami akan menggunakan JavaScript untuk mengawal penyiapan bar kemajuan.

Pertama, kita perlu mendapatkan rujukan kepada elemen dan mencipta pembolehubah global untuk memegang nilai semasa bar kemajuan. Sebagai contoh, dengan mengandaikan bahawa id bar kemajuan kita ialah "bar kemajuan", kita boleh menulisnya seperti ini:

let progressbar = document.getElementById("progressbar");
let progress = 0;

Seterusnya, kita boleh menulis fungsi untuk mengawal penyiapan bar kemajuan. Fungsi ini boleh menerima parameter yang menunjukkan kenaikan bar kemajuan. Setiap kali fungsi ini dipanggil, tahap penyiapan bar kemajuan akan diubah berdasarkan kenaikan yang diluluskan, dan nilai bar kemajuan akan dikemas kini. Sebagai contoh, kod berikut akan meningkatkan penyiapan bar kemajuan sebanyak 10%:

function updateProgress(increment) {
  progress += increment;
  progressbar.value = progress;
}

Untuk menguji fungsi ini, kita boleh menambah butang pada HTML dan memanggil fungsi updateProgress() dalam kliknya peristiwa. Sebagai contoh, kod berikut akan meningkatkan tahap penyiapan bar kemajuan sebanyak 20%:

<button onclick="updateProgress(20)">增加进度</button>

Seterusnya, kita boleh menambah beberapa logik untuk mengawal tahap penyiapan bar kemajuan secara dinamik. Sebagai contoh, kita boleh menulis pemasa untuk meningkatkan penyiapan bar kemajuan secara automatik secara berkala. Sebagai contoh, kod berikut akan meningkatkan tahap penyiapan bar kemajuan sebanyak 5% setiap 1 saat:

setInterval(function() {
  updateProgress(5);
}, 1000);

3 Digabungkan dengan permintaan AJAX untuk mengemas kini bar kemajuan
Dalam senario sebenar, bar kemajuan biasanya Ia digunakan untuk memaparkan kemajuan operasi tak segerak. Contohnya, operasi seperti memuat naik fail dan menghantar data ke pelayan mengambil masa tertentu dan bar kemajuan perlu dipaparkan untuk memberitahu pengguna kemajuan semasa. Dalam kes ini, kita perlu menggabungkan permintaan AJAX untuk mengemas kini bar kemajuan.

Ambil muat naik fail sebagai contoh Kami boleh memuat naik fail melalui permintaan AJAX dan menghantar kemajuan muat naik sebagai parameter ke dalam fungsi updateProgress(). Sebagai contoh, kod berikut mencipta permintaan AJAX untuk memuat naik fail:

function uploadFile(file) {
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload");
  xhr.upload.addEventListener("progress", function(event) {
    let percent = (event.loaded / event.total) * 100;
    updateProgress(percent);
  });
  xhr.send(file);
}

Dalam kaedah ini, kami mencipta permintaan POST melalui objek XMLHttpRequest dan menghantar fail sebagai parameter. Semasa proses permintaan, kami menambah pendengar peristiwa kemajuan untuk memantau kemajuan muat naik dan menghantar kemajuan sebagai parameter ke dalam fungsi updateProgress() untuk mengemas kini bar kemajuan.

Digabungkan dengan kaedah di atas, kami boleh mengemas kini bar kemajuan secara dinamik mengikut kemajuan operasi tak segerak, dengan itu mencapai pengalaman pengguna yang lebih baik.

Ringkasan:
Artikel ini memperkenalkan cara melaksanakan bar kemajuan menggunakan JavaScript. Pertama, kita boleh mencipta bar kemajuan asas menggunakan HTML dan CSS. Kemudian, kita boleh menggunakan JavaScript untuk mengawal penyiapan bar kemajuan secara dinamik. Akhir sekali, kami menggabungkan permintaan AJAX untuk mengemas kini bar kemajuan untuk mencapai pengalaman pengguna yang lebih baik. Kaedah di atas boleh digunakan dalam banyak aplikasi web untuk membantu pengguna memahami dengan lebih baik kemajuan tugasan dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan bar kemajuan dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!