知识问答

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

发布时间：2026-05-09 23:57:01 浏览量：0

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

实现思路

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

具体实现思路如下：

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

代码实现

HTML 代码

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

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;}

JS 代码

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

示例 1

let i = 0;const interval = setInterval(() => {  i = i + 10;  setProgress(i);  if (i >= 100) {    clearInterval(interval);  }}, 500);

示例 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 动态改变宽度框即可实现进度条效果。通过示例代码我们可以更好地理解进度条的实现过程，以及如何集成到自己的网站中。