持续更新。。。
一、 js动画下载进度条
核心方法：requestAnimationFrame ，更新动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下载进度条</title>
</head>
<body>
<!--更新屏幕画面:当你需要更新屏幕画面时就可以调用此方法。在浏览器下次重绘前执行回调函数。回调的次数通常是每秒60次,
可以让一次动画执行完，接着继续执行-->
下载中ing。。。
<div id="test"></div><span id="percent"></span>
<script>
var start = null;
var element = document.getElementById('test');
var per = document.getElementById('percent');
element.style.position = 'absolute';
var sum = 0;
function step() {
var num = Math.round(Math.random()*100);
sum += num;
element.append('=>')
var current_per = Math.round(sum/1000*100);
current_per = current_per>100?100:current_per;
per.innerText = current_per+'%';
if (sum < 1000) {
window.setTimeout(function () {
window.requestAnimationFrame(step);
},500)
}else {
element.innerHTML = '<b>下载成功！</b>'
}
}
window.requestAnimationFrame(step);
</script>
</body>
</html>
396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
