JavaScript进度条加载实现及时间显示

进度条的加载效果，一直是前端里挺常见也挺实用的小模块。不管是展示加载状态，还是提示任务进度，都能让用户体验好不少。这里我来分享两种比较好上手的实现方式，重点是都能**显示时间进度**，看着更直观。

基于时间间隔的进度条，思路挺简单。用setInterval按秒更新进度，用Date对象算下过去了多少时间，比如“3 秒已过”，这样用户就心里有数了：

let startTime = new Date().getTime();
let duration = 10000; // 10 秒
let progressBar = document.getElementById('progress-bar');
let intervalId = setInterval(() => {
  let currentTime = new Date().getTime();
  let elapsedTime = currentTime - startTime;
  if (elapsedTime >= duration) {
    clearInterval(intervalId);
    progressBar.style.width = '100%';
  } else {
    let progress = (elapsedTime / duration) * 100;
    progressBar.style.width = `${progress}%`;
    console.log(`${Math.floor(elapsedTime / 1000)}秒已过`);
  }
}, 1000);

另外一种就是异步任务驱动的，比如你做文件上传、读取大文件时，这种进度是靠真实的加载百分比来更新的。用onprogress事件监听，实时展示也不错：

let reader = new FileReader();
let progressBar = document.getElementById('progress-bar');
let totalBytes = file.size;
reader.onprogress = function(event) {
  if (event.lengthComputable) {
    let loaded = event.loaded;
    let progress = (loaded / totalBytes) * 100;
    progressBar.style.width = `${progress}%`;
    console.log(`${Math.floor(loaded / 1024)}KB 已加载`);
  }
};
reader.readAsDataURL(file);

一个是按时间算，一个是按实际进度算，看你业务场景选就行。建议配合动画、异常啥的一起上，体验会更流畅。嗯，如果你有个div进度条，还想让它“动”得更真实，这两种方式都蛮适合试试看。