首页
视频
资源
登录
原
JS 圆形进度条
4406
人阅读
2020/8/13 10:21
总访问:
2591222
评论:
0
收藏:
0
手机
分类:
前端
###效果图 ![](https://img.tnblog.net/arcimg/hb/574df8ce6c534a248b2517dfd9899b19.JPG) ###素材 ![](https://img.tnblog.net/arcimg/hb/0abb022e2b0d4a26ac6329ffd79a938d.png) ###index.html ```javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="MainStyle.css"/> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <div class="box"> <div class="percent"> <svg> <circle cx="70" cy="70" r="70"></circle> <circle cx="70" cy="70" r="70"></circle> </svg> <div class="number"> <h2 id="NewValue">87<span>%</span></h2> </div> </div> <div class="text">Progress</div> <div class="text"><input class="number" type="number" min="1" max="100" /></div> </div> <script type="text/javascript"> //初始化值 $(function(){ var initvalue = 79; //特效部分 $(".box .percent svg circle").css('stroke-dasharray','44'); $(".box .percent svg circle").css('stroke-dasharray','440'); //赋值部分 $("#NewValue").html('<h2 id="NewValue">'+initvalue+'<span>%</span></h2>'); $(".box .percent svg circle").eq(1).css('stroke-dashoffset','calc(440 - (440 * '+initvalue+') / 100)'); $("input.number").val(initvalue); }) //按钮 $("input.number").attr("readonly", "1").click(function (e) { var self = $(this); var x = e.pageX - self.offset().left; var y = e.pageY - self.offset().top; var d = 0; if (x <= 20) { self.css("background-image", "url(none.png)"); d = -1; } if (x >= 50) { self.css("background-image", "url(none.png)"); d = 1; } if (d != 0) { let Pvalue = Math.min(Math.max((parseInt(self.val()) || 0) + d, parseInt(self.attr("min"))), parseInt(self.attr("max"))); $("#NewValue").html('<h2 id="NewValue">'+Pvalue+'<span>%</span></h2>') $(".box .percent svg circle").eq(1).css('stroke-dashoffset','calc(440 - (440 * '+Pvalue+') / 100)'); self.val(Pvalue); setTimeout(function () { self.css("background-image", ""); }, 200); } }); </script> </body> </html> ``` ###MainStyle.css ```css *{ margin: 0; padding: 0; font-family: 'Roboto',sans-serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #03a9f4; } .box{ position: relative; width: 300px; height: 400px; display: flex; justify-content: center; align-items: center; /*设置 <div> 元素内弹性盒元素的方向为相反的顺序*/ flex-direction: column; background: #fff; /*向 div 元素添加阴影*/ box-shadow: 0 30px 60px rgba(0,0,0,.2); } .box .percent{ position: relative; width: 150px; height: 150px; } .box .percent svg{ position: relative; width: 150px; height: 150px; } .box .percent svg circle{ width: 150px; height: 150px; /* 对于形状和文本,它是一个presentation属性,它定义用于绘制元素的颜色(或任何SVG绘制服务器,例如渐变色或图案)。对于动画,它定义了动画的最终状态。 */ fill: none; /* 属性指定了当前对象的轮廓的宽度。它的默认值是1。如果使用了一个<percentage>,这个值代表当前视口的百分比。如果使用了0值,则将不绘制轮廓。 */ stroke-width: 10; /*用于定义用于绘制形状轮廓的颜色(或任何SVG绘制服务器,例如渐变色或图案);*/ stroke: #000; transform: translate(5px,5px); /*可控制用来描边的点划线的图案范式。*/ stroke-dasharray: 4; stroke-dashoffset: 440; /*属性制定了,在开放子路径被设置描边的情况下,用于开放自路径两端的形状。*/ stroke-linecap: round; } .box .percent svg circle:nth-child(1){ stroke-dashoffset: 0; stroke: #f3f3f3; } .box .percent svg circle:nth-child(2){ /* 用于创建虚线,之所以后面跟的是array的,是因为值其实是数组。请看下面解释 参考 https://www.cnblogs.com/daisygogogo/p/11044353.html */ stroke-dashoffset: calc(440 - (440 * 40) / 100); transition: 3s; stroke: #03a9f4; } .box .percent .number{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #999; } .box .percent .number h2 { font-size: 48px; } .box .percent .number h2 span { font-size: 24px; } .box .text{ padding: 10px 0 0; color: #999; font-weight: 700; /*设置字母间距*/ letter-spacing: 1px; } input.number { display: inline-block; width: 72px; height: 20px; text-align: center; line-height: 20px; background-image: url(none.png); /*设置是否及如何重复背景图像*/ background-repeat: no-repeat; background-size: 72px 20px; border: none; /*定义一些不同的光标*/ cursor: pointer; } input.number:focus { background-image: url(none.png); border: none; } ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
尘叶心繁
这一世以无限游戏为使命!
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net后台框架
168篇
linux
17篇
linux中cve
1篇
windows中cve
0篇
资源分享
10篇
Win32
3篇
前端
28篇
传说中的c
4篇
Xamarin
9篇
docker
15篇
容器编排
101篇
grpc
4篇
Go
15篇
yaml模板
1篇
理论
2篇
更多
Sqlserver
4篇
云产品
39篇
git
3篇
Unity
1篇
考证
2篇
RabbitMq
23篇
Harbor
1篇
Ansible
8篇
Jenkins
17篇
Vue
1篇
Ids4
18篇
istio
1篇
架构
2篇
网络
7篇
windbg
4篇
AI
18篇
threejs
2篇
人物
1篇
嵌入式
2篇
python
13篇
HuggingFace
8篇
pytorch
9篇
opencv
6篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术