div实现圆环进度条 

<!DOCTYPE html>
<html>
<head>
    <meta charset="{CHARSET}">
    <title>利用 clip-path 实现环形进度条</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #circle,.test1{
            width:200px;
            height:200px;
            border-radius:50%;                                          
        }
        #circle{
            background-color:#ccc;
            text-align:center;
            position:relative;
            left:50px;
            top:50px;
        }
        .test2{
            background-color:blue;
            /*position: absolute;*/
            /*clip: rect(0px,200px,200px,100px);*/
            /*-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0%,100% 100%,0% 100%,0% 0%,30% 0%);*/
        }
        .circle-ban{
            width:170px;
            height:170px;
            border-radius:50%;
            background-color:white; 
            position:absolute;
            top:15px;       
            left:15px;
        }
        .circle-ban p{margin-top:76px;}         
    </style>
</head>
<body>
    <div id="circle">
        <div class="test1"></div>
        <div class="circle-ban">
            <p><span class="mask">0</span>%</p>
        </div>
    </div>      
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        function press(r){
            /* 百分比与角度的关系
             * 100%对应360度->1%=3.6deg
             * 角度与周长的关系
             * 360度对应长度为800->0.45deg=1px
             * 百分比与周长的关系
             * 100%对应周长800->0.125%=1px           
             * ----->1%=8px
             * 45deg=100px(角度对应的周长)=50%(clip-path中的百分比)
             * ------->100%(百分比值)=400%(clip-path中的百分比)
             */

            var r=r*4;
            var div=$(".test1");
            div.addClass("test2");
            var k1="polygon(50% 50%,50% 0%,";
            var k2=k1+"100% 0%,";
            var k3=k2+"100% 100%,";
            var k4=k3+"0% 100%,";
            var k5=k4+"0% 0%,";
            if(r<=50){
                r+=50;
                div.css({"-webkit-clip-path":k1+r+"% 0%)"});                    
            }else if((r>50)&&(r<=150)){
                r-=50;
                div.css({"-webkit-clip-path":k2+"100% "+r+"%)"});
            }else if((r>150)&&(r<=250)){
                r=250-r;
                div.css({"-webkit-clip-path":k3+r+"% 100%)"});
            }else if((r>250)&&(r<=350)){
                r=350-r;
                div.css({"-webkit-clip-path":k4+"0% "+r+"%)"});
            }else if((r>350)&&(r<=400)){
                r-=350;
                div.css({"-webkit-clip-path":k5+r+"% 0%)"});
            }
        }           
        var n=0;
        var timer=setInterval((function(){
            n++;
            if(n==100){clearInterval(timer);timer=null;}                
            $(".mask").text(n);
            press(n);
        }),100);

    </script>
</body>
</html>

 

posted @ 2018-12-20 21:36  我是格鲁特  阅读(992)  评论(0)    收藏  举报