requestAnimationFrame--进度条

转载于 2015-11-26 23:20:21 发布 · 748 阅读

文章标签：

#Html-JS

本文介绍如何利用requestAnimationFrame在网页上实现一个动态更新的进度条。通过HTML和JavaScript结合，能够平滑地展示进度变化过程，适用于网页应用中加载状态的可视化呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

requestAnimationFrame

本文完全，摘录Internet。实例实现进度条

Html:
<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
<input type="button" value="Run" id="run"/>
JS：
window.requestAnimationFrame = window.requestAnimationFrame || 
window.mozRequestAnimationFrame ||                              window.webkitRequestAnimationFrame ||                       window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;

function step(timestamp) {
    progress += 1;
    ele.style.width = progress + "%";
    ele.innerHTML=progress + "%";
    if (progress < 100) {
        requestAnimationFrame(step);
    }
}

requestAnimationFrame(step);

document.getElementById("run").addEventListener("click", function() {
    ele.style.width = "1px";
    progress = 0;
    requestAnimationFrame(step);
}, false);