HTML代码怎么实现进度条_HTML代码进度条效果实现与动态更新方法

// 获取进度条元素
const progressBar = document.getElementById('myProgress');

let currentProgress = 0;
const interval = setInterval(() => {
    currentProgress += 5;
    if (currentProgress <= 100) {
        progressBar.value = currentProgress; // 更新value属性
        // 也可以更新文本内容，但<progress>标签内部的文本通常是回退内容
        // 如果需要显示百分比，通常会结合一个<span>标签
    } else {
        clearInterval(interval);
        console.log('任务完成！');
    }
}, 200); // 每200毫秒更新一次

// 获取进度条元素和文本元素
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毫秒更新一次

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;
            // 更新<progress>标签
            document.getElementById('myProgress').value = percentComplete;
            // 或者更新<div>模拟的进度条
            document.querySelector('.progress-bar').style.width = `${percentComplete}%`;
            document.querySelector('.progress-text').textContent = `${Math.round(percentComplete)}%`;
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('文件上传成功！');
        } else {
            console.error('文件上传失败。');
        }
    };

    xhr.send(file);
}

// 假设我们有一个文件输入框
// document.getElementById('fileInput').addEventListener('change', function(e) {
//     const file = e.target.files[0];
//     if (file) {
//         uploadFile(file);
//     }
// });