CSS实现进度条和订单进度条

下面我将详细讲解如何在网页中使用CSS实现进度条和订单进度条的完整攻略。

CSS 实现进度条

在CSS中，我们可以使用伪元素 ::before 和 ::after 来实现进度条。以下是 HTML 和 CSS 代码：

<div class="progress-bar">
  <div class="progress"></div>
</div>

.progress-bar {
  width: 100%;
  height: 30px;
  background: #ddd;
  position: relative;
}

.progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #4caf50;
  width: 50%;
  transition: width 1s ease-in-out;
}

.progress-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #333;
}

.progress-bar::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #333;
}

代码解释：

• .progress-bar 容器定义了进度条的样式，包括宽度、高度和背景颜色
• .progress 定义了进度条的样式，包括宽度、高度、背景颜色和过渡效果
• .progress-bar::before 定义了进度条左侧的线条样式
• .progress-bar::after 定义了进度条右侧的线条样式

为了让进度条动起来，我们可以用 JavaScript 动态改变进度条的 width 属性。以下是 JavaScript 代码：

let progress = document.querySelector(".progress");
let count = 0;
let intervalId = setInterval(() => {
  count += 10;
  progress.style.width = count + "%";
  if (count === 100) {
    clearInterval(intervalId);
  }
}, 1000);

代码解释：

• progress 变量用来获取进度条元素
• count 变量用来记录进度条的百分比
• setInterval() 方法用来循环执行改变进度条宽度的操作
• clearInterval() 方法用来停止循环执行

我们可以修改 count 的值来控制进度条的百分比，从而达到动态效果。

CSS 实现订单进度条

在订单流程中，我们经常需要使用订单进度条来指示用户当前的订单状态。接下来我将详细讲解如何使用 HTML 和 CSS 来实现订单进度条。

以下是 HTML 和 CSS 代码：

<div class="order-progress">
  <div class="step active">
    <div class="bullet">1</div>
    <div class="title">订单已确认</div>
  </div>
  <div class="step">
    <div class="bullet">2</div>
    <div class="title">准备发货</div>
  </div>
  <div class="step">
    <div class="bullet">3</div>
    <div class="title">已发货</div>
  </div>
  <div class="step">
    <div class="bullet">4</div>
    <div class="title">已完成</div>
  </div>
</div>

.order-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.bullet {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.active .bullet {
  background: #4caf50;
  color: #fff;
}

.title {
  margin-top: 10px;
}

代码解释：

• .order-progress 容器定义了订单进度条的样式，使用了 flex 布局并设置了对齐方式和内容之间的间距
• .step 定义了每个步骤的样式，使用了 flex 布局和垂直方向布局
• .bullet 定义了每个步骤的圆圈样式，并设置了宽度、高度、圆角、背景颜色和居中对齐
• .active .bullet 定义了当前步骤圆圈的样式，使用了不同的背景颜色和文字颜色

为了让订单进度条动起来，我们可以使用 JavaScript 动态改变当前步骤的类名。以下是 JavaScript 代码：

let steps = document.querySelectorAll(".step");
let count = 0;
let intervalId = setInterval(() => {
  if (count > 0) {
    steps[count - 1].classList.remove("active");
  }
  steps[count].classList.add("active");
  count++;
  if (count === steps.length) {
    clearInterval(intervalId);
  }
}, 1000);

代码解释：

• steps 变量用来获取所有步骤元素
• count 变量用来记录当前步骤的索引
• setInterval() 方法用来循环执行改变当前步骤的操作
• clearInterval() 方法用来停止循环执行

我们可以修改 count 的值来控制当前步骤的变化，并使用 classList 来增加和删除 active 类名来改变样式。