【设计模式深度剖析】【4】【结构型】【组合模式】| 以文件系统为例加深理解-CFANZ编程社区

1. svg实现圆形进度条

效果图：

1. 写个假接口：

let res = {
        curLegendList: [
            { progress: "87", name: "进度1",color:"#00fe41" },
            { progress: "66", name: "进度2" ,color:"orange"},
            { progress: "50", name: "进度3",color:"#00fe41" },
            { progress: "25", name: "进度4" ,color:"red"},
            { progress: "87", name: "进度1",color:"#00fe41" },
            { progress: "66", name: "进度2" ,color:"orange"},
            { progress: "50", name: "进度3",color:"#00fe41" },
            { progress: "25", name: "进度4" ,color:"red"},
        ]
    }

2. 编写css

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: '微软雅黑', sans-serif;
        }


        .container {
            width: 30px;
            height: 30px;
        }

        .zcy_box {
            position: relative;
            width: 250px;
            height: 150px;
            display: flex;
            align-items: center;
            background-color: darkgoldenrod;
        }


        .zcy_box .zcy_percent {
            position: relative;
            width: 150px;
            height: 150px;
        }

        .zcy_box .zcy_percent svg {
            position: relative;
            width: 150px;
            height: 150px;
        }

        .zcy_box .zcy_percent svg circle {
            width: 35px;
            height: 35px;
            fill: none;
            stroke-width: 10;
            stroke: #000;
            transform: translate(5px, 5px);
            stroke-dasharray: 440;
            stroke-dashoffset: 440;
            stroke-linecap: round;
        }


        .zcy_box .zcy_percent .zcy_number {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #767576;
        }

        .zcy_box .zcy_percent .zcy_number h2 {
            font-size: 24px;
        }

        .zcy_box .zcy_percent .zcy_number span {
            font-size: 24px;
        }

        .zcy_box .text {
            font-size: 24px;
            padding: 10px 0 0;
            color: #999;
            font-weight: 400;
            letter-spacing: 1px;
        }

3. 写个公用的js方便调用，可以自己改造

function htmlFunc(name, progress, color) {
        var html = '';
        html += '<div class="zcy_box">';
        html += '<h2 class="text">'+name+'</h2>';
        html += '<div class="zcy_percent">';
        html += '<div class="zcy_number">';
        html += '<h2>'+progress+'<span>%</span></h2>';
        html += '</div>';
        html += '<svg>';
        html += '<circle style="stroke-dashoffset: 0;stroke: #ccc;" cx="70" cy="70" r="40"></circle>';
        html += '<circle style="stroke-dashoffset: calc(440 - (440 * '+progress+')/180);stroke: '+color+';" cx="70" cy="70" r="40"></circle>';
        html += '</svg>';
        html += '</div>';
        html += '</div>';
        return html;
    }

4. 调用js以及传数据进去

let curLegendList = res.curLegendList;
    var curHtml='';
    for(let i=0;i<curLegendList.length;i++){
        curHtml += htmlFunc(curLegendList[i].name,curLegendList[i].progress,curLegendList[i].color);
    }

    $(".app").html(curHtml);

<!DOCTYPE html>
<html lang="en">

<head>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG实现圆形进度条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: '微软雅黑', sans-serif;
        }


        .container {
            width: 30px;
            height: 30px;
        }

        .zcy_box {
            position: relative;
            width: 250px;
            height: 150px;
            display: flex;
            align-items: center;
            background-color: darkgoldenrod;
        }


        .zcy_box .zcy_percent {
            position: relative;
            width: 150px;
            height: 150px;
        }

        .zcy_box .zcy_percent svg {
            position: relative;
            width: 150px;
            height: 150px;
        }

        .zcy_box .zcy_percent svg circle {
            width: 35px;
            height: 35px;
            fill: none;
            stroke-width: 10;
            stroke: #000;
            transform: translate(5px, 5px);
            stroke-dasharray: 440;
            stroke-dashoffset: 440;
            stroke-linecap: round;
        }


        .zcy_box .zcy_percent .zcy_number {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #767576;
        }

        .zcy_box .zcy_percent .zcy_number h2 {
            font-size: 24px;
        }

        .zcy_box .zcy_percent .zcy_number span {
            font-size: 24px;
        }

        .zcy_box .text {
            font-size: 24px;
            padding: 10px 0 0;
            color: #999;
            font-weight: 400;
            letter-spacing: 1px;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <div class="app">


        


    </div>

</body>
<script>
    var obj = {
        curLegendList: [
            { progress: "87", name: "进度1",color:"#00fe41" },
            { progress: "66", name: "进度2" ,color:"orange"},
            { progress: "50", name: "进度3",color:"#00fe41" },
            { progress: "25", name: "进度4" ,color:"red"},
            { progress: "87", name: "进度1",color:"#00fe41" },
            { progress: "66", name: "进度2" ,color:"orange"},
            { progress: "50", name: "进度3",color:"#00fe41" },
            { progress: "25", name: "进度4" ,color:"red"},
        ]
    }


    function htmlFunc(name, progress, color) {
        var html = '';
        html += '<div class="zcy_box">';
        html += '<h2 class="text">'+name+'</h2>';
        html += '<div class="zcy_percent">';
        html += '<div class="zcy_number">';
        html += '<h2>'+progress+'<span>%</span></h2>';
        html += '</div>';
        html += '<svg>';
        html += '<circle style="stroke-dashoffset: 0;stroke: #ccc;" cx="70" cy="70" r="40"></circle>';
        html += '<circle style="stroke-dashoffset: calc(440 - (440 * '+progress+')/180);stroke: '+color+';" cx="70" cy="70" r="40"></circle>';
        html += '</svg>';
        html += '</div>';
        html += '</div>';
        return html;
    }

    let curLegendList = res.curLegendList;
    var curHtml='';
    for(let i=0;i<curLegendList.length;i++){
        curHtml += htmlFunc(curLegendList[i].name,curLegendList[i].progress,curLegendList[i].color);
    }

    $(".app").html(curHtml);
    

</script>

</html>

2. svg实现方形进度条

效果图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.js">
    </script>

</head>

<body>
    <div id="app">

    </div>

</body>

<script>
    const circleGirth = 2 * Math.PI * 100 // 圆角的圆的周长
    const width = 100 - 2 * 10 // 正方形的边长
    const girth = circleGirth + 4 * width // 圆角矩形总周长
    
    const dasharray = `${0.60*0.426*0.5 * girth} ${girth}`

    const curHtml = `
    <svg width="120" height="50">
        <rect fill="none" x="10" y="10" rx="10" width="100" height="30" stroke="#ebedf0" stroke-width="5" />
        <rect fill="none" x="10" y="10" rx="10" width="100" height="30" stroke="#50D4AB" stroke-width="5"  stroke-dasharray="${dasharray}"/>
    </svg>
    `;
    $("#app").html(curHtml);

</script>

</html>

五分钟学会各种环形进度条

方形进度条从上面链接改造而来，大家可以去看看