JS 圆形进度条 电脑版发表于：2020/8/13 10:21 ###效果图  ###素材  ###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; } ```
