如何优雅地实现JavaScript进度条效果？

2024年10月6日 互联网
``javascript，function progressBar(progress) {， var bar = document.getElementById('progress-bar');， bar.style.width = progress + '%';，}，``

以下是关于JS 进度条效果实现代码整理的详细内容：

JS 进度条效果实现代码整理

原生JS+CSS实现进度条

1、HTML结构：

如何优雅地实现JavaScript进度条效果？

说明
div#wrapper 外层容器，用于包裹进度条
div#progressbar 进度条容器
div#fill 进度条元素，用于模拟进度条推进效果

2、CSS样式：

@keyframes move {
    0% { width: 0; }
    100% { width: 100%; }
}
选择器 属性 值
#wrapper position, width, height, border relative, 200px, 100px, 1px solid darkgray
#progressbar position, top, left, margin-left, margin-top, width, height, border absolute, 50%, 50%, -90px, -10px, 180px, 20px, 1px solid darkgray
#fill animation, text-align, background-color move 2s, center, #6caf00

3、JavaScript代码：

var progressbar = {
    init: function() {
        var fill = document.getElementById('fill');
        var count = 0;
        var timer = setInterval(function() {
            count++;
            fill.innerHTML = count + '%';
            if (count === 100) {
                clearInterval(timer);
            }
        }, 17);
    }
};
progressbar.init();

二、HTML5<progress> 标签实现进度条

1、HTML结构：

说明
progress 使用HTML5的标签，通过简单的JS实现进度条滚动效果

2、JavaScript代码：

var pg = document.getElementById('pg');
setInterval(function() {
    if (pg.value != 100) {
        pg.value++;
    } else {
        pg.value = 0;
    }
}, 100);

滑动条效果实现

1、HTML结构：

说明
div#wrapper 外层容器，用于包裹填充块和滑块
div#fill 填充块
div#slider 滑块

2、CSS样式：

选择器 属性 值
#wrapper position, width, height, border relative, 200px, 20px, 1px solid darkgray
#slider position, left, width, height, display, background-color, cursor absolute, 0, 20px, 20px, inline-block, #af58a8, pointer
#fill display, width, height, background inline-block, 0, 20px, #6caf00

3、JavaScript代码：

var slider = (function() {
    init = function() {
        var wrapper = document.getElementById('wrapper');
        var slider = document.getElementById('slider');
        // 省略具体实现代码，可参考原文链接
    }
});

相关问题与解答

问题1：如何控制进度条动画的持续时间？

答：可以通过修改CSS中@keyframes规则的百分比和对应的属性值来控制动画的持续时间，将animation: move 2s;中的2s改为其他值，如3s，即可延长动画持续时间。

问题2：如何使用HTML5的<progress>标签实现进度条效果？

答：可以使用<progress>标签结合简单的JavaScript代码来实现进度条效果，在HTML中添加<progress max="100" value="0" id="pg"></progress>，然后在JavaScript中通过设置定时器来更新value属性的值，从而实现进度条的滚动效果。

小伙伴们，上文介绍了“JS 进度条效果实现代码整理-javascript技巧”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。

最新文章