html5 svg 圆形进度条
2016-04-05 09:21
459 查看
html5 svg 圆形进度条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5中的SVG属性实现圆形进度条效果</title> <style> #a{color:red;} </style> </head> <body> <svg width="440" height="440"> <text style="fill:black;" font-size="80" x="160" y="240" width="440" height="440" id="a">30%</text> <circle cx="220" cy="220" r="170" stroke-width="40" stroke="#C9CACA" fill="none"></circle> <circle id="c1" cx="220" cy="220" r="170" stroke-width="40" stroke="#E73468" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=""></circle> </svg> <script> var circle = document.getElementById("c1"); var a = document.getElementById("a").innerHTML; var b=parseInt(a)/100; var percent = 0, perimeter = Math.PI * 2 * 170; setInterval(function () { if(percent<b){ circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent)); percent+=1/100; } },100); </script> </body> </html>
相关文章推荐
- H5拍照应用开发经历的那些坑儿
- HTML5学习第一天
- HTML5 之 基本标签、属性
- html5学习系列之ef类标签
- 【缓存\性能】HTML5缓存的那些事
- HTML5 -- WebSocket
- html5学习系列之cd标签
- html5非常火,他究竟与html4有何差别?
- [HeadFirst-HTMLCSS学习笔记][第十二章HTML5标记]
- [HeadFirst-HTMLCSS学习笔记][第十二章HTML5标记]
- html5入门
- 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践
- 2016年 最火的 15 款 HTML5 游戏引擎
- html5学习系列——b标签
- html5学习系列——简介加a标签
- 移动h5开发资源整理
- 2016年 最火的 15 款 HTML5 游戏引擎
- 使用HTML5中的element.dataset操作自定义data-*数据
- h5嵌入视频遇到的bug及总结
- Html5 - 日期和时间选择输入