js实现增加数字显示的环形进度条效果
2017-02-05 17:07
831 查看
效果如下:
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <link> <meta name="page-view-size" content="640*530"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <style> .wapper{ position:absolute; left:100px; top:100px; box-sizing:border-box; } .text{ position:absolute; left:30px; top:40px; font-family:"Microsoft YaHei"; font-weight:bold; color:indianred; } .rect{ position:absolute; width:50px; height:100px; overflow:hidden; } .right{ left:50px; } .circle{ position:absolute; width:100px; height:100px; border-radius:50%; box-sizing:border-box; border:5px solid indianred; } .circle_right{ left:-50px; clip:rect(0px 50px 100px 0px); animation:roll 5s linear 0s 1 forwards; } .circle_left{ clip:rect(0px 100px 100px 50px); animation:roll 5s linear 5s 1 forwards; } @keyframes roll{ 0%{transform:rotate(0deg)} 100%{ transform:rotate(180deg)} } </style> <body leftmargin="0" topmargin="0"> <div class="wapper"> <div class="rect right"><div class="circle circle_right"></div></div> <div class="rect left"><div class="circle circle_left"></div></div> <div class="text"><span id="num">1</span><span>%</span></div> </div> </body> <script type="text/javascript"> window.onload=function(){ var $num=document.getElementById('num'); (function(){ var i=1,timer; add(); function add(){ var timer=setTimeout(function(){ add(); },100); $num.innerHTML=i; i<100?i++:clearTimeout(timer) } })(); } </script> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
- jQuery实现立体式数字动态增加(animate方法)
- jQuery实现立体式数字滚动条增加效果
- JavaScript数组Array对象增加和删除元素方法总结
- 为jquery的ajaxfileupload增加附加参数的方法
- Apache增加最大连接数的方法
- php 数组操作(增加,删除,查询,排序)等函数说明
- MYSQL数据库中的现有表增加新字段(列)
- js简单实现表单中点击按钮动态增加输入框数量的方法
- jquery对table中各数据的增加、保存、删除操作示例
- 数据库中两张表之间的数据同步增加、删除与更新实现思路
- json数据处理技巧(字段带空格、增加字段、排序等等)
- Jquery中增加参数与Json转换代码
- JavaScript实现数值自动增加动画
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- 用户自定义多选框checkbox
- js数组实现图片轮播
- js可突破windows弹退效果代码
- jquery彩色投票进度条简单实例演示
- webBrowser执行js的方法,并返回值,c#后台取值的实现
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- C#环形队列的实现方法详解
- 爆炸式的JS圆形浮动菜单特效代码
- 浅谈C#下winform和JS的互相调用和传参(webbrowser)
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 前端弹出对话框 js实现ajax交互
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例