知识问答
如何优雅地实现JavaScript进度条效果？
2025-09-21 16:44:13
来源：互联网转载
``
javascript，function progres***ar(progress) {， var bar = document.getElementById('progress-bar');， bar.style.width = progress + '%';，}，``以下是关于JS 进度条效果实现代码整理的详细内容：
JS 进度条效果实现代码整理
原生JS+CSS实现进度条
1、HTML结构：
| 说明 | |
p#wrapper | 外层容器，用于包裹进度条 |
p#progres***ar | 进度条容器 |
p#fill | 进度条元素，用于模拟进度条推进效果 |
2、CSS样式：
| 选择器 | 属性 | 值 |
#wrapper | position, width, height, border | relative, 200px, 100px, 1px solid darkgray |
#progres***ar | 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 progres***ar = { init: function() { var fill = document.getElementById('fill'); var count = 0; var timer = setInterval(function() { count++; fill.innerHTML = count + '%'; if (count === 100) { clearInterval(timer); } }, 17); }};progres***ar.init();二、HTML5<progress> 标签实现进度条
1、HTML结构：
| 说明 | |
progress | 使用HTML5的 |
2、JavaScript代码：
var pg = document.getElementById('pg');setInterval(function() { if (pg.value != 100) { pg.value++; } else { pg.value = 0; }}, 100);滑动条效果实现
1、HTML结构：
| 说明 | |
p#wrapper | 外层容器，用于包裹填充块和滑块 |
p#fill | 填充块 |
p#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技巧”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
