requestAnimationFrame--进度条
2015-11-26 23:20
393 查看
requestAnimationFrame
本文完全,摘录Internet。实例实现进度条Html: <div id="test" style="width:1px;height:17px;background:#0f0;">0%</div> <input type="button" value="Run" id="run"/> JS: 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);
相关文章推荐
- UIScrollView && UITableView相关属性汇总(2013)
- UIScrollView和UITableView总结
- UITableView tableHeaderView autolayout自动计算高度
- UITableView使用详解
- [leetcode]Implement Queue using Stacks
- UIAlertView弹出框
- Android Uiautomator工具使用
- UIActionSheet底部弹出框
- IOS之UILabel添加下划线
- GUI Frame(一)
- iPhone的UITextField-更改占位符文本颜色
- SPOJ LIS2 Another Longest Increasing Subsequence Problem 三维偏序最长链 CDQ分治
- mybatis:java.lang.IllegalArgumentException:Parameter Maps collection does notcontain value for ...
- 读书笔记--其他UI组件
- 108 Which two statements are true about the Automatic Diagnostic Repository (ADR)? (Choose two.) A.
- UIScrollView视差模糊效果
- Android官方文档翻译 五 1.3Building a Simple User Interface
- QUESTION 105 Examine the following RMAN script: RMAN> run { debug on; allocate channel c1 type disk;
- UI错误集
- 基于GUI的简易图像处理系统设计与实现