轻松实现带节点的进度条

2023-12-08 04:00:17

前言

进度条是一种常见的UI元素，用于向用户显示任务的完成进度。带节点的进度条是一种更复杂的形式，它可以在进度条中显示出任务的各个步骤。

实现带节点的进度条的方法有很多，这里介绍一种简单易行的实现方法。这种方法只需要三张图片，一张是进度条背景，一张是节点，一张是勾。

实现步骤

首先，需要准备三张图片：进度条背景、节点和勾。这三张图片的大小必须一致。
然后，需要创建一个HTML结构，如下所示：

<div class="progress-bar">
  <div class="progress-bar-background"></div>
  <div class="progress-bar-nodes"></div>
  <div class="progress-bar-ticks"></div>
</div>

接下来，需要给这三个div添加样式。进度条背景的样式如下：

.progress-bar-background {
  width: 100%;
  height: 20px;
  background-color: #efefef;
}

节点的样式如下：

.progress-bar-nodes {
  width: 100%;
  height: 20px;
  position: relative;
}

.progress-bar-node {
  width: 20px;
  height: 20px;
  background-color: #666;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}

勾的样式如下：

.progress-bar-ticks {
  width: 100%;
  height: 20px;
  position: relative;
}

.progress-bar-tick {
  width: 10px;
  height: 10px;
  background-color: #333;
  position: absolute;
  left: 0;
  top: 5px;
}

最后，需要使用JavaScript来控制进度条的进度。进度条的进度可以通过改变节点的位置来实现。

var progressBar = document.querySelector('.progress-bar');
var progressBarNodes = progressBar.querySelector('.progress-bar-nodes');
var progressBarTicks = progressBar.querySelector('.progress-bar-ticks');

var progress = 0;

setInterval(function() {
  progress += 10;

  if (progress > 100) {
    progress = 100;
  }

  progressBarNodes.style.width = progress + '%';
  progressBarTicks.style.left = progress + '%';
}, 100);