分享发现 [黑科技|2] 进度条的使用

魂殇 · 2017年07月24日 · 最后由 胡家xiao少爷 回复于 2018年05月09日 · 1325 次阅读
本帖已被设为精华帖!

前言

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

代码

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

收工

共收到 5 条回复

放个测试效果链接吧,大佬

可以放个预览截图或者测试链接,妥妥的。

可否把逐字打字的代码分享给我

能直接复制使用吗?求分享。

6楼 已删除
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册