HTML 和 CSS 步骤进度条（完整代码）

2023-12-29 19:51:31

在当今快节奏的数字世界中，用户友好且视觉吸引力的网站和应用程序变得越来越重要。为了改善用户体验，一种流行的做法是使用步骤进度条来可视化地跟踪多步骤过程的进展。步骤进度条不仅可以帮助用户了解当前所处的步骤，还可以帮助他们估计完成任务需要花费多长时间。

本教程将向您展示如何使用HTML和CSS创建一个交互式步骤进度条。我们将从一个基本的进度条开始，然后添加圆圈元素来表示每个步骤。最后，我们将实现导航按钮，以便用户可以在步骤之间轻松移动。

HTML代码

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="progress-bar-container">
    <div class="progress-bar">
      <div class="progress"></div>
    </div>
    <div class="steps-container">
      <div class="step active">步骤 1</div>
      <div class="step">步骤 2</div>
      <div class="step">步骤 3</div>
      <div class="step">步骤 4</div>
    </div>
    <div class="navigation-buttons">
      <button class="previous-button" disabled>上一步</button>
      <button class="next-button">下一步</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS代码

/* 进度条容器样式 */
.progress-bar-container {
  width: 500px;
  margin: 0 auto;
}

/* 进度条样式 */
.progress-bar {
  height: 20px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 进度条填充样式 */
.progress {
  height: 100%;
  background-color: #4caf50;
  border-radius: 5px;
  transition: width 0.5s ease-in-out;
}

/* 步骤容器样式 */
.steps-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

/* 步骤样式 */
.step {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  cursor: pointer;
}

/* 当前活动步骤样式 */
.step.active {
  background-color: #4caf50;
  color: white;
}

/* 导航按钮容器样式 */
.navigation-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
}

/* 上一步按钮样式 */
.previous-button,
.next-button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

/* 上一步按钮禁用样式 */
.previous-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

JavaScript代码

// 获取进度条元素
const progressBar = document.querySelector('.progress');

// 获取步骤元素
const steps = document.querySelectorAll('.step');

// 获取导航按钮元素
const previousButton = document.querySelector('.previous-button');
const nextButton = document.querySelector('.next-button');

// 设置当前步骤索引
let currentStepIndex = 0;

// 更新进度条宽度
const updateProgressBar = () => {
  // 计算进度条的宽度
  const progressWidth = (currentStepIndex + 1) / steps.length * 100;

  // 设置进度条的宽度
  progressBar.style.width = `${progressWidth}%`;
};

// 更新步骤的活动状态
const updateStepStatus = () => {
  // 移除所有步骤的活动状态
  steps.forEach((step) => {
    step.classList.remove('active');
  });

  // 设置当前步骤的活动状态
  steps[currentStepIndex].classList.add('active');
};

// 更新导航按钮的禁用状态
const updateNavigationButtonStatus = () => {
  // 如果当前步骤是第一个步骤，则禁用上一步按钮
  if (currentStepIndex === 0) {
    previousButton.setAttribute('disabled', true);
  } else {
    previousButton.removeAttribute('disabled');
  }

  // 如果当前步骤是最后一个步骤，则禁用下一步按钮
  if (currentStepIndex === steps.length - 1) {
    nextButton.setAttribute('disabled', true);
  } else {
    nextButton.removeAttribute('disabled');
  }
};

// 处理上一步按钮点击事件
previousButton.addEventListener('click', () => {
  // 将当前步骤索引减一
  currentStepIndex--;

  // 更新进度条、步骤状态和导航按钮状态
  updateProgressBar();
  updateStepStatus();
  updateNavigationButtonStatus();
});

// 处理下一步按钮点击事件
nextButton.addEventListener('click', () => {
  // 将当前步骤索引加一
  currentStepIndex++;

  // 更新进度条、步骤状态和导航按钮状态
  updateProgressBar();
  updateStepStatus();
  updateNavigationButtonStatus();
});

// 初始化进度条、步骤状态和导航按钮状态
updateProgressBar();
updateStepStatus();
updateNavigationButtonStatus();