HTML进度条实现及动态更新技巧

// 获取进度条元素和文本元素
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;
            // 更新<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);
//     }
// });

通过这些方法，JavaScript能让静态的进度条“活”起来，提供实时的用户反馈。

自定义HTML进度条的样式有哪些技巧？

自定义进度条的样式是前端开发中一个常见的需求，毕竟默认的进度条样式可能与整体设计格格不入。这方面，

/* 针对Webkit浏览器 */
progress::-webkit-progress-bar {
    background-color: #f0f0f0;
    border-radius: 5px;
}

progress::-webkit-progress-value {
    background-color: #007bff;
    border-radius: 5px;
    transition: width 0.3s ease-in-out; /* 添加动画 */
}

/* 针对Firefox浏览器 */
progress::-moz-progress-bar {
    background-color: #007bff;
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
}

/* 兼容性处理，设置默认背景色，虽然控制力不强 */
progress {
    background-color: #f0f0f0; /* fallback for browsers that don't support pseudo-elements */
    border-radius: 5px;
    height: 15px; /* 设置高度 */
    width: 250px; /* 设置宽度 */
}