当前位置：首页 > JavaScript

js实现进度

2026-03-02 06:32:49JavaScript

实现进度条的基本方法

使用HTML和CSS创建进度条的容器，通过JavaScript动态更新进度。

<div id="progress-container" style="width: 100%; background-color: #f3f3f3;">
  <div id="progress-bar" style="width: 0%; height: 30px; background-color: #4CAF50;"></div>
</div>

function updateProgress(percent) {
  const progressBar = document.getElementById('progress-bar');
  progressBar.style.width = percent + '%';
}

动画效果实现

使用CSS过渡效果让进度变化更平滑。

#progress-bar {
  transition: width 0.3s ease;
}

模拟真实进度

使用定时器模拟任务进度更新。

let progress = 0;
const interval = setInterval(() => {
  progress += 5;
  updateProgress(progress);

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

基于Promise的进度控制

适用于异步操作时更新进度。

function simulateAsyncTask() {
  return new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });
}

async function runTasks() {
  const tasks = [/* 任务数组 */];
  for (let i = 0; i < tasks.length; i++) {
    await simulateAsyncTask();
    updateProgress((i + 1) / tasks.length * 100);
  }
}

圆形进度条实现

使用SVG或Canvas创建圆形进度指示器。

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="54" fill="none" stroke="#f3f3f3" stroke-width="12"/>
  <circle id="progress-circle" cx="60" cy="60" r="54" fill="none" stroke="#4CAF50" stroke-width="12" stroke-dasharray="339.292" stroke-dashoffset="339.292"/>
</svg>

function updateCircleProgress(percent) {
  const circumference = 339.292;
  const offset = circumference - (percent / 100) * circumference;
  document.getElementById('progress-circle').style.strokeDashoffset = offset;
}

进度条事件监听

添加事件监听器响应进度变化。

document.getElementById('progress-bar').addEventListener('transitionend', () => {
  console.log('进度更新完成');
});

进度条组件封装

创建可复用的进度条组件类。

js实现进度

class ProgressBar {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.bar = document.createElement('div');
    this.bar.style.height = '100%';
    this.bar.style.width = '0%';
    this.bar.style.backgroundColor = '#4CAF50';
    this.container.appendChild(this.bar);
  }

  update(percent) {
    this.bar.style.width = percent + '%';
  }
}