和CSS模拟
这种方法提供了极高的自定义自由度，能实现各种视觉效果。
这里，外层的.progress-container定义了进度条的整体大小和背景，内层的.progress-bar则通过调整width来显示进度。transition属性让宽度变化看起来更平滑。
如何利用JavaScript实现进度条的动态更新？
动态更新进度条是其核心功能之一，这通常涉及到JavaScript对DOM元素属性或样式的操作。无论是用户上传文件、加载数据，还是执行一个耗时操作，我们都需要实时反馈进度。
对于value属性。比如，我们有一个ID为myProgress的
// 获取进度条元素
const progressBar = document.getElementById('myProgress');
let currentProgress = 0;
const interval = setInterval(() => {
currentProgress += 5;
if (currentProgress <= 100) {
progressBar.value = currentProgress; // 更新value属性
// 也可以更新文本内容，但而对于模拟的进度条，我们则需要修改内部进度条元素的
width样式。假设我们有
.progress-bar和
.progress-text：
// 获取进度条元素和文本元素
const progressBarFill = document.querySelector('.progress-bar');
const progressText = document.querySelector('.progress-text');
let currentDivProgress = 0;
const divInterval = setInterval(() => {
currentDivProgress += 10;
if (currentDivProgress <= 100) {
progressBarFill.style.width = `${currentDivProgress}%`; // 更新宽度样式
progressText.textContent = `${currentDivProgress}%`; // 更新百分比文本
} else {
clearInterval(divInterval);
console.log('任务完成！');
}
}, 300); // 每300毫秒更新一次在实际应用中，这些更新操作会与具体的业务逻辑绑定。例如，文件上传时，XMLHttpRequest对象的upload.onprogress事件会提供loaded和total属性，我们可以据此计算百分比并更新进度条。
function uploadFile(file) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
// 监听上传进度
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
// 更新
