分享一个纯手写进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 300px;">
<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
</div>
<input type="button" value="Run" id="run"/>
</body>
</html>
<script>
// window.requestAnimationFrame()这个API是浏览器提供的js全局方法，针对动画效果。
// 为了解决setinterval失帧的情况 我们有的时候会使用 requestAnimationFame();
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;
function step() {
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);
</script>