圆形进度条/百分比数据 --- 利用css3和js实现
2016-08-15 00:00
489 查看
摘要: 转帖!感谢那位大神 http://www.w3cplus.com/css3/create-radial-progress-bar-with-jQuery-and-css3.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>乐师傅-注册</title> <style> body { font-family: "微软雅黑"; } .circle { width: 200px; height: 200px; position: absolute; border-radius: 50%; background: #0cc; } .pie_left, .pie_right { width:200px; height:200px; position: absolute; top: 0;left: 0; } .left, .right { width:200px; height:200px; background:#00aacc; border-radius: 50%; position: absolute; top: 0; left: 0; } .pie_right, .right { clip:rect(0,auto,auto,100px); } .pie_left, .left { clip:rect(0,100px,auto,0); } .mask { width: 150px; height: 150px; border-radius: 50%; left: 25px; top: 25px; background: #FFF; position: absolute; text-align: center; line-height: 150px; font-size: 20px; font-weight: bold; color: #00aacc; } </style> </head> <body> <div class="circle" style="left:0"> <div class="pie_left"><div class="left"></div></div> <div class="pie_right"><div class="right"></div></div> <div class="mask"><span>0</span>%</div> </div> <div class="circle" style="left:220px"> <div class="pie_left"><div class="left"></div></div> <div class="pie_right"><div class="right"></div></div> <div class="mask"><span>15</span>%</div> </div> <div class="circle" style="left:440px"> <div class="pie_left"><div class="left"></div></div> <div class="pie_right"><div class="right"></div></div> <div class="mask"><span>30</span>%</div> </div> <div class="circle" style="left:660px"> <div class="pie_left"><div class="left"></div></div> <div class="pie_right"><div class="right"></div></div> <div class="mask"><span>60</span>%</div> </div> <div class="circle" style="left:880px"> <div class="pie_left"><div class="left"></div></div> <div class="pie_right"><div class="right"></div></div> <div class="mask"><span>90</span>%</div> </div> <script src="jquery-1.12.3.js"></script> <script> $(function() { $('.circle').each(function(index, el) { var num = $(this).find('span').text() * 3.6; if (num<=180) { $(this).find('.right').css('transform', "rotate(" + num + "deg)"); } else { $(this).find('.right').css('transform', "rotate(180deg)"); $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)"); }; }); }); </script> </body> </html>
相关文章推荐
- 利用css3动画和border来实现圆形进度条
- linux printf设置颜色与输出控制,利用控制码,实现固定位置输出百分比进度
- 利用ajaxfileupload.js实现跨域上传图片并处理返回的数据
- WPF利用动画实现圆形进度条
- 利用JS轻松实现获取表单数据
- 利用css3和js原生实现鼠标移入移出模块透明度的变化
- js下利用userData实现客户端保存表单数据
- 纯css3实现的圆形进度条
- 利用js、jQuery和css实现环形进度条组件封装
- 利用jQuery实现漂亮的圆形进度条倒计时插件
- Native.js学习:利用Native.js实现Android与HTML数据的交互
- 利用php和js实现页面数据刷新
- JS利用CSS3 transform rotate 实现旋转转盘或背景(大转盘抽奖)
- WebGIS中利用AGS JS+eChart实现一些数据展示的探索
- 利用js实现跨域取数据问题
- js实现的一个简单的百分比进度条
- c# 中运用js实现百分比数据加载提示
- 利用Ajax生成ProgressBar:实现同类大批量数据批量生成Html,并实时显示进度条,可查看处理日志
- js下利用userData实现客户端保存表单数据
- 利用js实现无刷新上传头像(或文件)并显示进度条