JavaScriptステップバーでパーセント表示を実現する方法

Web ページやアプリケーションを開発する場合、ステップ バーは非常に重要な要素であり、ユーザーが現在の進行状況と完了すべき作業がどのくらい残っているかを明確に理解するのに役立ちます。通常、ステップ バーには、ユーザーが完了したステップ数とまだ完了していないステップ数が表示され、現在の進行状況のパーセンテージが正確に表示される必要があります。この記事では、JavaScriptを使用してステップバーをパーセンテージ付きで表示する方法を紹介します。

ステップ 1: HTML 構造

まず、HTML でステップ バーのスケルトンを作成する必要があります。以下に示すように、単純な順序なしリスト (ul) といくつかの番号付きリスト項目 (li) を使用できます。

<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>

各リスト項目にはステップ番号が含まれていることがわかります ( < で表されます)。 span class="step"> 要素) とタイトル (<span class="title"> 要素で表されます)。最初のリスト項目では、active クラスを使用して現在のステップを表します。

ステップ 2: CSS スタイル

次に、CSS でステップ バーのスタイルを定義する必要があります。次のように、フレックスボックスを使用してリスト項目を整列およびレイアウトします。

.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;
}

この CSS スタイルでは、フレックスボックスを使用して各リスト項目を垂直方向に整列し、justify-content: space-between各リスト項目の間にはスペースを空けてください。また、疑似要素 ::before および position:Absolute を使用して、現在のステップの背景色と進行状況バーの割合を表示します。各リスト項目のステップ番号とタイトルに対応するスタイルも追加していることに注意してください。

ステップ 3: JavaScript コード

最後に、進捗率を計算してステップ バーに表示する JavaScript コードを記述する必要があります。リスト項目ごとに、完了したステップ数と合計ステップ数を個別にカウントし、ステップ番号の隣の要素に進捗率を表示します。これを実現するには、次のコードを使用します。

// 获取步骤条的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}%`;
});

このコードでは、計算された進捗率を整数に四捨五入するために Math.round() 関数を使用していることに注意してください。これにより、表示が回避されます。小数点以下の桁の間違いによって引き起こされる問題。

最後に、上記のコードを HTML ファイルに保存し、ファイルを開いてステップ バーの効果とその進行状況を確認します。シンプルではないでしょうか？上記の手順により、進捗率を示すステップ バーを簡単に作成し、ユーザーに現在の進捗状況を明確に理解させることができます。

以上がJavaScriptステップバーでパーセント表示を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。