JS 圆形进度条

效果图

素材

index.html

<!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

*{
    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;
}

效果图

素材

index.html

MainStyle.css

JS与Controller中分割字符串的方法

珍藏！！ JS CSS不传之秘集合

JSON对象和JSON字符串的区别

对象转JSON

来！！！今天玩 JSon

JS遍历localStorage的键值对

拓展JS通用方法来对应c操作

JS的localStorage

JS监听input、keydown，有输入法时打字完成后触发事件

JS截取两个字符中间的字符串

Vue.JS+Layer实现表格数据绑定与更新

JS使用正则进行常用验证

JS字符串的替换

Vue.JS 实现省市联动

Vue.JS常见问题

vue.JS常用指令