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

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

魂殇 · 2017年07月24日 · 最后由 utoen 回复于 2020年05月19日 · 2935 次阅读
本帖已被设为精华帖！

前言

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

代码

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

收工

6 个赞
共收到 7 条回复
anletian #1 · 2017年07月24日

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

adminer #2 · 2017年07月24日

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

未知惊 #4 · 2018年01月04日

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

胡家xiao少爷 #5 · 2018年05月09日

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

6楼 已删除
手残的好风 在 关于进度条的问题 中提及了此贴 03月19日 15:45
utoen #9 · 2020年05月19日 1 个赞

0%div>

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

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