js实现进度条

使用HTML和CSS创建基础结构

在HTML中创建一个容器元素用于放置进度条，通常使用<div>元素。CSS用于设置进度条的样式，包括背景、颜色和过渡效果。

<div class="progress-container">
  <div class="progress-bar" id="progressBar"></div>
</div>

.progress-container {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

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

使用JavaScript控制进度

通过JavaScript动态更新进度条的宽度。可以使用setInterval或requestAnimationFrame来模拟进度变化。

const progressBar = document.getElementById('progressBar');
let progress = 0;

function updateProgress() {
  if (progress >= 100) {
    clearInterval(interval);
    return;
  }
  progress += 1;
  progressBar.style.width = progress + '%';
}

const interval = setInterval(updateProgress, 50);

实际应用中的进度更新

在实际应用中，进度条通常与异步操作（如文件上传或AJAX请求）结合使用。可以通过事件监听或回调函数更新进度。

function simulateAsyncOperation(callback) {
  let progress = 0;
  const interval = setInterval(() => {
    progress += 10;
    callback(progress);
    if (progress >= 100) {
      clearInterval(interval);
    }
  }, 500);
}

simulateAsyncOperation((progress) => {
  progressBar.style.width = progress + '%';
});

使用HTML5的<progress>元素

HTML5提供了原生进度条元素<progress>，可以直接通过JavaScript设置其值。

<progress id="nativeProgress" value="0" max="100"></progress>

const nativeProgress = document.getElementById('nativeProgress');
let value = 0;

function updateNativeProgress() {
  if (value >= 100) {
    return;
  }
  value += 5;
  nativeProgress.value = value;
  setTimeout(updateNativeProgress, 200);
}

updateNativeProgress();

添加动画效果

通过CSS动画或JavaScript动态计算，可以为进度条添加更丰富的视觉效果，如渐变或弹性动画。

.progress-bar {
  /* 其他样式 */
  background: linear-gradient(to right, #4CAF50, #8BC34A);
}

function animateProgress(target) {
  const currentWidth = parseInt(progressBar.style.width) || 0;
  if (currentWidth >= target) return;

  progressBar.style.width = (currentWidth + 1) + '%';
  requestAnimationFrame(() => animateProgress(target));
}

animateProgress(75);

响应式进度条

确保进度条在不同屏幕尺寸下正常工作，可以通过CSS的百分比宽度和媒体查询实现。

.progress-container {
  width: 80%;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .progress-container {
    width: 95%;
  }
}