扇形统计

1.html

<div class="box">
        <div class="pie1"></div>
        <div class="pie2"></div>
        <div class="pie3"></div>
</div>

2.css

 * {
            margin: 0;
            padding: 0;

        }

        .box {
            width: 80px;
            height: 80px;
            margin: 20px auto;
            position: relative;
        }

        .pie1,
        .pie2,
        .pie3 {
            position: absolute;
            width: 0;
            height: 0;
            border-radius: 50%;
            border-left: 40px solid #37c;
            border-right: 40px solid #3c7;
            border-top: 40px solid #3c7;
            border-bottom: 40px solid #37c;
            transform: rotate(45deg);
        }

        .pie2 {
            border-right: 40px solid #37c;
            border-left: 40px solid transparent;
            border-bottom: 40px solid transparent;
            border-top: 40px solid #37c;
        }

        .pie3 {
            display: none;
            border-right: 40px solid #3c7;
            border-left: 40px solid transparent;
            border-bottom: 40px solid transparent;
            border-top: 40px solid #3c7;
        }

3.js

 var pie2 = document.getElementsByClassName("pie2")[0];
        var pie3 = document.getElementsByClassName("pie3")[0];

        function setDeg(num) {
            var deg = num.split('%')[0] * 3.6;
            if (360 >= deg && deg > 180) {
                pie2.style.transform = "rotate(225deg)";
                pie3.style.display = "block";
                pie3.style.transform = "rotate(" + (45 + deg - 180) + "deg)";
            } else if (deg <= 180) {
                pie2.style.transform = "rotate(" + (45 + deg) + "deg)"
            }
        }
        var num1 = 1;
        var time1 = setInterval(function () {
            setDeg((num1++) + "%");
        }, 100)
        // var pieNum2 = 45,
        //     pieNum3 = 45;
        // var time1 = setInterval(function () {
        //         pieNum2++;
        //         pie2.style.transform = "rotate(" + pieNum2 + "deg)"
        //         if (pieNum2 >= 225) {
        //             clearInterval(time1);
        //             pie3.style.display="block";
        //             time2 = setInterval(function () {
        //                 pieNum3++;
        //                 pie3.style.transform = "rotate(" + pieNum3 + "deg)";
        //                 if(pieNum3>=225){
        //                     clearInterval(time2);
        //                 }
        //             },50)
        //         }
        //     }, 50),
        //     time2;