js如何实现进度条(js进度条特效怎么写)-不念博客

在 JavaScript 中，可以通过结合 HTML 和 CSS 创建一个简单的进度条。

以下是一个基本的进度条实现示例：

首先，在 HTML 中创建进度条的结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Progress Bar Example</title>
  <style>
    .progress-bar {
      width: 100%;
      background-color: #f3f3f3;
      position: relative;
    }

    .progress {
      width: 0%;
      height: 30px;
      background-color: #4caf50;
      position: absolute;
    }
  </style>
</head>
<body>
  <div class="progress-bar">
    <div id="progress" class="progress"></div>
  </div>

  <script>
    // JavaScript code goes here
  </script>
</body>
</html>

然后，在 <script> 标签中添加 JavaScript 代码以控制进度条的进度：

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

function simulateProgress() {
  let progress = 0;
  const interval = setInterval(() => {
    if (progress < 100) {
      progress += 1;
      updateProgressBar(progress);
    } else {
      clearInterval(interval);
    }
  }, 100); // 每100毫秒更新一次进度条
}

// 模拟进度条
simulateProgress();

在这个示例中，我们创建了一个名为 updateProgressBar 的函数，它接受一个表示进度百分比的参数，并根据参数更新进度条的宽度。

simulateProgress 函数使用 setInterval 模拟进度条的更新过程，每 100 毫秒更新一次进度。

当进度达到 100% 时，使用 clearInterval 停止更新。