JS 进度条效果实现代码整理

JS 进度条效果是网页交互效果中比较常见的一种，可以用来展示任务执行的进展情况。本文将介绍如何使用 JS 实现进度条效果，并对代码进行整理说明。

实现思路

实现进度条效果的主要思路是通过 JS 动态改变 CSS 样式来实现进度条的“进度”效果。

具体实现思路如下：

1. 使用 HTML 和 CSS 进行页面布局与样式定义
2. 通过 JS 获取进度条元素，并计算任务执行进度
3. 使用 JS 动态改变进度条的 CSS 样式，展示任务执行进度

代码实现

HTML 代码

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

以上 HTML 代码实现了一个简单的进度条，其中 .progress-bar 为整个进度条容器，.progress 为进度条本身。

CSS 代码

.progress-bar {
  width: 100%;
  height: 20px;
  border: 1px solid #333;
}

.progress {
  height: 100%;
  background-color: #4CAF50;
  width: 0%;
  transition: width 0.5s ease-in-out;
}

以上 CSS 代码定义了进度条的样式，包括外边框、进度条高度等。其中，在 .progress 容器中添加了一个 transition 属性，用于动态改变进度条宽度时产生平滑的过渡效果。

JS 代码

function setProgress(progress) {
  const progressBar = document.querySelector('.progress');
  progressBar.style.width = progress + '%';
}

以上 JS 代码是动态修改进度条宽度的核心代码。通过 setProgress() 函数的参数 progress 来控制进度条宽度的百分比展示。

示例 1

let i = 0;

const interval = setInterval(() => {
  i = i + 10;
  setProgress(i);

  if (i >= 100) {
    clearInterval(interval);
  }
}, 500);

以上示例代码实现了一个简单的定时器，每 500ms 增加一次进度条百分比，直到达到 100。

示例 2

function startTask() {
  const doTask = () => {
    i = i + 10;
    setProgress(i);

    if (i >= 100) {
      clearInterval(interval);
    }
  };

  let i = 0;
  const interval = setInterval(doTask, 500);
}

document.querySelector('#startBtn').addEventListener('click', startTask);

以上示例代码使用一个按钮来触发任务的启动。点击按钮后，进度条开始展示任务的进展情况，直到任务完成。

总结

通过本文的介绍，我们可以了解到 JS 实现进度条效果的基本原理和实现步骤。使用 CSS 定义进度条样式，通过 JS 动态改变宽度框即可实现进度条效果。通过示例代码我们可以更好地理解进度条的实现过程，以及如何集成到自己的网站中。