Bagaimana untuk merealisasikan paparan peratusan dalam bar langkah javascript

Apabila membangunkan halaman web atau aplikasi, bar langkah ialah elemen yang sangat penting, yang boleh membantu pengguna memahami dengan jelas kemajuan semasa dan berapa banyak kerja yang perlu diselesaikan. Lazimnya, bar langkah harus menunjukkan bilangan langkah yang telah pengguna selesaikan dan bilangan langkah yang belum selesai, dan ia perlu memaparkan peratusan kemajuan semasa dengan tepat. Dalam artikel ini, kami akan menunjukkan kepada anda cara memaparkan bar langkah dengan peratusan menggunakan JavaScript.

Langkah 1: Struktur HTML

Pertama, kita perlu mencipta rangka bar langkah dalam HTML. Kita boleh menggunakan senarai ringkas tidak tertib (ul) dan beberapa item senarai bernombor (li) seperti berikut:

<ul class="progress">
  <li class="active">
    <span class="step">1</span>
    <span class="title">步骤一</span>
  </li>
  <li>
    <span class="step">2</span>
    <span class="title">步骤二</span>
  </li>
  <li>
    <span class="step">3</span>
    <span class="title">步骤三</span>
  </li>
  <li>
    <span class="step">4</span>
    <span class="title">步骤四</span>
  </li>
</ul>

Kita dapat melihat bahawa setiap item senarai mengandungi nombor langkah (diwakili oleh elemen <span class="step">) dan tajuk (diwakili oleh elemen <span class="title">). Dalam item senarai pertama, kami juga menggunakan kelas active untuk mewakili langkah semasa.

Langkah 2: Gaya CSS

Seterusnya, kita perlu menentukan gaya untuk bar langkah dalam CSS. Kami akan menggunakan flexbox untuk menjajarkan dan susun atur item senarai seperti berikut:

.progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.progress li {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

.progress li.active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -50%;
  width: 200%;
  height: 4px;
  background-color: #4caf50;
  transform: translateY(-50%);
  z-index: -1;
}

.progress .step {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background-color: #f2f2f2;
  color: #999;
  margin-bottom: 10px;
}

.progress li.active .step {
  background-color: #4caf50;
  color: #fff;
}

.progress .title {
  display: block;
  font-size: 12px;
  color: #777;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.progress li:first-child .title {
  text-align: left;
}

.progress li:last-child .title {
  text-align: right;
}

Dalam gaya CSS ini, kami telah menggunakan flexbox untuk menjajarkan setiap item senarai secara menegak dan justify-content: space-between untuk menjajarkan setiap item senarai secara menegak beberapa ruang antara item senarai. Kami juga menggunakan elemen pseudo ::before dan position: absolute untuk mempersembahkan warna latar belakang langkah semasa dan bar kemajuan peratusan. Perhatikan bahawa kami juga menambah gaya yang sepadan untuk nombor langkah dan tajuk dalam setiap item senarai.

Langkah Tiga: Kod JavaScript

Akhir sekali, kita perlu menulis beberapa kod JavaScript untuk mengira peratusan kemajuan dan memaparkannya dalam bar langkah. Untuk setiap item senarai, kami mengira bilangan langkah yang telah diselesaikan dan jumlah bilangan langkah secara individu, dan kemudian memaparkan peratusan kemajuan dalam elemen di sebelah nombor langkah. Kita boleh menggunakan kod berikut untuk mencapai ini:

// 获取步骤条的UL元素
const progress = document.querySelector('.progress');

// 获取步骤条中的所有列表项
const steps = progress.querySelectorAll('li');

// 遍历每个列表项
steps.forEach((step, index) => {
  // 获取当前列表项的步骤号
  const stepNumber = step.querySelector('.step');

  // 计算已完成的步骤数和总步骤数
  const completed = index;
  const total = steps.length - 1;

  // 计算进度的百分比
  const percent = Math.round((completed / total) * 100);

  // 在步骤号旁边的元素中显示百分比
  stepNumber.innerHTML = `${percent}%`;
});

Perhatikan bahawa kami menggunakan fungsi Math.round() dalam kod ini untuk membundarkan peratusan kemajuan yang dikira kepada integer untuk mengelakkan masalah paparan tempat perpuluhan.

Akhir sekali, kami boleh menyimpan kod di atas pada fail HTML kami dan membuka fail untuk melihat kesan bar langkah dan peratusan kemajuannya. Bukankah ia sangat mudah? Dengan langkah di atas, kami boleh membuat bar langkah dengan peratusan kemajuan dengan mudah dan memberi pengguna pemahaman yang jelas tentang kemajuan semasa mereka.

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