자바스크립트 단계 표시줄에 백분율 표시를 구현하는 방법

웹페이지나 애플리케이션을 개발할 때 단계 표시줄은 사용자가 현재 진행 상황과 완료해야 할 작업이 얼마나 남았는지 명확하게 이해하는 데 도움이 되는 매우 중요한 요소입니다. 일반적으로 단계 표시줄은 사용자가 완료한 단계 수와 아직 완료하지 못한 단계 수를 표시해야 하며 현재 진행률을 정확하게 표시해야 합니다. 이 문서에서는 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"&gt로 제공)가 포함되어 있음을 알 수 있습니다. ; 요소) 및 제목(<span class="title"> 요소로 표시됨)입니다. 첫 번째 목록 항목에서는 active 클래스를 사용하여 현재 단계를 나타냅니다. <span class="step">元素表示）和一个标题（由<span class="title">元素表示）。在第一个列表项中，我们还使用了active类来表示当前步骤。

步骤二：CSS样式

接下来，我们需要在CSS中为步骤条定义样式。我们将使用flexbox来对齐和布局列表项，如下所示：

.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样式中，我们使用了flexbox来将每个列表项垂直对齐，并使用justify-content: space-between使每个列表项之间留有一些空间。我们还使用伪元素::before和position: absolute将当前步骤背景颜色和百分比进度条呈现出来。注意，我们还为每个列表项中的步骤号和标题添加了相应的样式。

步骤三：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()

2단계: CSS 스타일

다음으로 CSS의 단계 표시줄 스타일을 정의해야 합니다. Flexbox를 사용하여 아래와 같이 목록 항목을 정렬하고 레이아웃합니다. 🎜rrreee🎜 이 CSS 스타일에서는 Flexbox를 사용하여 각 목록 항목을 수직으로 정렬하고 justify-content: space-between을 사용했습니다. 각 목록 항목 사이에 약간의 공간이 있습니다. 또한 의사 요소 ::before 및 position:absolute를 사용하여 현재 단계 배경색과 백분율 진행률 표시줄을 표시합니다. 각 목록 항목의 단계 번호와 제목에 적절한 스타일도 추가했습니다. 🎜🎜3단계: JavaScript 코드🎜🎜마지막으로 진행률을 계산하고 이를 단계 표시줄에 표시하는 JavaScript 코드를 작성해야 합니다. 각 목록 항목에 대해 완료된 단계 수와 총 단계 수를 개별적으로 계산한 다음 단계 번호 옆에 있는 요소에 진행률을 표시합니다. 이를 달성하기 위해 다음 코드를 사용할 수 있습니다. 🎜rrreee🎜 이 코드에서는 Math.round() 함수를 사용하여 계산된 진행률을 정수로 반올림하여 소수점 이하 자릿수를 방지합니다. 비트 오류로. 🎜🎜마지막으로 위의 코드를 HTML 파일에 저장하고 파일을 열어 단계 표시줄의 효과와 진행률을 확인할 수 있습니다. 간단하지 않은가? 위의 단계를 통해 진행률이 표시된 단계 표시줄을 쉽게 만들고 사용자에게 현재 진행 상황을 명확하게 이해할 수 있습니다. 🎜

위 내용은 자바스크립트 단계 표시줄에 백분율 표시를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!