js的进度条

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条示例</title>
<style>
  #progressBar {
    width: 100%;
    background-color: #ddd;
  }
  #progress {
    width: 0%;
    height: 30px;
    background-color: #4CAF50;
    text-align: center;
    line-height: 30px;
    color: white;
  }
</style>
</head>
<body>

<div id="progressBar">
  <div id="progress">0%</div>
</div>

<button onclick="startProgress()">开始进度</button>

<script>
function startProgress() {
  let progress = 0;
  const progressBar = document.getElementById('progress');
  const interval = setInterval(() => {
    if (progress >= 100) {
      clearInterval(interval);
    } else {
      progress++;
      progressBar.style.width = progress + '%';
      progressBar.textContent = progress + '%';
    }
  }, 50);
}
</script>

</body>
</html>

function startProgress() {
  let progress = 0;
  const progressBar = document.getElementById('progress');
  function step() {
    if (progress < 100) {
      progress++;
      progressBar.style.width = progress + '%';
      progressBar.textContent = progress + '%';
      requestAnimationFrame(step);
    }
  }
  requestAnimationFrame(step);
}