前言

分享一下进度条的代码~~

代码

<div id="test" style="width:1px;height:17px;background:#0f0;/*此处#0f0是颜色，你也可以换成blue，具体CSS自己查*/">0%div><input type="button" value="Run" id="run"/>


=: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);

收工