JS如何实现进度条_JavaScript动态进度条效果实现与控制方法

<div class="progress-bar">
  <div class="progress" id="myProgress"></div>
</div>

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}
<p>.progress {
width: 0;
height: 100%;
background-color: #4caf50;
border-radius: 10px;
transition: width 0.3s ease;
}</p>

function setProgress(percent) {
  const progressBar = document.getElementById("myProgress");
  progressBar.style.width = percent + "%";
}

let progress = 0;
const timer = setInterval(() => {
  progress += 1;
  setProgress(progress);
  if (progress >= 100) {
    clearInterval(timer);
  }
}, 50); // 每50毫秒增加1%

const fileInput = document.getElementById("fileUpload");
<p>fileInput.addEventListener("change", function(e) {
const file = e.target.files[0];
const formData = new FormData();
formData.append("file", file);</p><p>const xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);</p><p>xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percent = (event.loaded / event.total) * 100;
setProgress(percent);
}
};</p><p>xhr.send(formData);
});</p>

// 修改setProgress函数
function setProgress(percent) {
  const progressBar = document.getElementById("myProgress");
  progressBar.style.width = percent + "%";
  progressBar.textContent = Math.round(percent) + "%";
}

.progress {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
}