您的位置:首页 > 产品设计 > UI/UE

requestAnimationFrame--进度条

2015-11-26 23:20 393 查看

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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: