js实现进度
JavaScript 进度条实现方法
方法一：使用HTML5 <progress> 元素
HTML5原生提供进度条标签，通过JavaScript动态更新值：
<progress id="fileProgress" value="0" max="100"></progress>const progressBar = document.getElementById('fileProgress');
progressBar.value = 75; // 更新进度值（0-100）方法二：CSS样式模拟进度条
通过动态修改CSS宽度实现更灵活的样式控制：
<div class="progress-container">
<div id="myProgress" class="progress-bar"></div>
</div>.progress-container {
width: 100%;
background-color: #ddd;
}
.progress-bar {
height: 20px;
width: 0%;
background-color: #4CAF50;
}function updateProgress(percent) {
document.getElementById('myProgress').style.width = percent + '%';
}
updateProgress(50); // 更新至50%方法三：第三方库（如ProgressBar.js）
使用现成库快速实现复杂效果：
// 安装：npm install progressbar.js
const ProgressBar = require('progressbar.js');
const circle = new ProgressBar.Circle('#container', {
color: '#FFEA82',
strokeWidth: 4
});
circle.animate(0.65); // 动画过渡到65%方法四：文件上传进度监控
通过XMLHttpRequest或Fetch API监控上传进度：
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(percent + '% uploaded');
}
};
xhr.open('POST', '/upload', true);
xhr.send(formData);关键参数说明
value/max：定义进度范围和当前值transition：CSS过渡效果使变化更平滑requestAnimationFrame：适合动画类进度更新
注意事项
- 移动端需考虑触摸反馈
- 长时间任务建议添加取消功能
- 异步操作需配合Promise或async/await
- 重要操作应提供进度说明文本（ARIA支持）
