摘要：一實(shí)現(xiàn)原理首先，我們來(lái)一個(gè)圓黑色。我們希望的是，繼續(xù)旋轉(zhuǎn)被黑色遮住。。。二來(lái)，萬(wàn)一項(xiàng)目中不需要使用呢，以后還得實(shí)現(xiàn)。

在寫(xiě)這篇文章之前，筆者查看了多篇博客，無(wú)奈前輩大多只是貼了代碼，沒(méi)有清晰明了的注釋?zhuān)匀菀鬃屝氯丝吹迷评镬F里。這里，筆者在弄明白原理后，對(duì)代碼進(jìn)行了優(yōu)化，決定寫(xiě)（總結(jié)）一篇清晰、明了的圓形進(jìn)度條的實(shí)現(xiàn)，以便后人能快速搞懂。

首先，我們來(lái)一個(gè)圓（黑色）。
接著，再來(lái)兩個(gè)半圓，將黑色的圓遮住。（為了演示，左右兩側(cè)顏色不一樣）
這時(shí)候，我們順時(shí)針旋轉(zhuǎn)右側(cè)藍(lán)色的半圓，下面的黑色圓就會(huì)暴露出來(lái)，比如我們旋轉(zhuǎn)45度（12.5%），效果出來(lái)了。
如果我們將藍(lán)色的右半圓同樣設(shè)置成灰色，看效果，一個(gè)12.5%的餅圖就出來(lái)了！

OK，我們?cè)傩D(zhuǎn)更大的度數(shù)試試，比如40%（144度），50%（180度），60%（216度）如下圖。
我們發(fā)現(xiàn)，旋轉(zhuǎn)180度之后右半圓與左半圓重合了，如果再旋轉(zhuǎn)，就會(huì)在右上角冒出來(lái)，顯然不是我們想要的。

我們希望的是，繼續(xù)旋轉(zhuǎn)被黑色遮住。。。嗯。。。怎么做呢？

我們將右側(cè)的圓回歸原位，把它刷成黑色（和底色一樣），然后旋轉(zhuǎn)左邊的半圓（它在右側(cè)半圓的更底層），這樣，它就會(huì)被右側(cè)半圓遮住了。好的，廢話(huà)不多說(shuō)，我們將左側(cè)的半圓順時(shí)針旋轉(zhuǎn)45度，效果出來(lái)了?？梢韵胂?，繼續(xù)旋轉(zhuǎn)，180度的時(shí)候，就完全被右側(cè)半圓遮住，而左側(cè)底色全部暴露，這樣100%顯示出來(lái)了。

最后，加上一個(gè)白色的小圓，放在正中間就行了。

好的，到這里，我們已經(jīng)明白如何實(shí)現(xiàn)的了。

html部分

    

    

    
    

        60%
    

css部分

    /*支持IE9及以上*/
    .circle-bar { font-size:200px; width: 1em; height: 1em; position: relative;  background-color: #333; }
    .circle-bar-left,.circle-bar-right { width: 1em; height: 1em; background-color: #eee; }
    /*
        這里采用clip剪切了圓，實(shí)現(xiàn)左右兩個(gè)半圓，右半圓在后面，因此在更上一層，
        clip的用法參考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
     */
    .circle-bar-right { clip:rect(0,auto,auto,.5em); }
    .circle-bar-left { clip:rect(0,.5em,auto,0); }
    
    .mask { width: 0.8em; height: 0.8em;  background-color: #fff;text-align: center;line-height: 0.2em; color:rgba(0,0,0,0.5); }
    .mask :first-child { font-size: 0.3em; height: 0.8em; line-height: 0.8em; display: block;  }
    /*所有的后代都水平垂直居中，這樣就是同心圓了*/
    .circle-bar * {  position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
    /*自身以及子元素都是圓*/
    .circle-bar, .circle-bar > * { border-radius: 50%; }
    

JavaScript實(shí)現(xiàn)

    //反正CSS3中的border-radius屬性IE8是不支持了，所以這里就用新方法吧getElementsByClassName()走起
    window.onload = function(){

        var circleBar    = document.getElementsByClassName("circle-bar")[0];
        var percent      = parseInt(circleBar.getElementsByClassName("percent")[0].firstChild.nodeValue);
        var color        = circleBar.css("background-color");
        var left_circle  = circleBar.getElementsByClassName("circle-bar-left")[0];
        var right_circle = circleBar.getElementsByClassName("circle-bar-right")[0];

        if( percent <= 50 ) {
            var rotate = "rotate("+(percent*3.6)+"deg)";
            right_circle.css3("transform",rotate);
        }else {
            var rotate = "rotate("+((percent-50)*3.6)+"deg)";
            right_circle.css ("background-color",color);//背景色設(shè)置為進(jìn)度條的顏色
            right_circle.css3("transform","rotate(0deg)");//右側(cè)不旋轉(zhuǎn)
            left_circle.css3 ("transform",rotate);//左側(cè)旋轉(zhuǎn)
        }
    }

    //封裝了css3函數(shù)，主要是懶得重復(fù)書(shū)寫(xiě)代碼，既然寫(xiě)了css3函數(shù)，順便寫(xiě)個(gè)css吧，統(tǒng)一樣式，好看一些
    Element.prototype.css = function(property,value){
        
        if ( value ) {
            //CSS中像background-color這樣的屬性，‘-’在JavaScript中不兼容，需要設(shè)置成駝峰格式
            var index = property.indexOf("-");
            if( index != -1 ) {
                var char = property.charAt(index+1).toUpperCase();
                property.replace(/(-*){1}/,char);
            }
            this.style[property] = value;
        }else{
            //getPropertyValue()方法參數(shù)類(lèi)似background-color寫(xiě)法，所以不要轉(zhuǎn)駝峰格式
            return window.getComputedStyle(this).getPropertyValue(property);
        }
    }

    //封裝一個(gè)css3函數(shù)，用來(lái)快速設(shè)置css3屬性
    Element.prototype.css3 = function(property,value){
        if( value ){
            property = capitalize(property.toLowerCase());
            this.style["webkit"+property] = value;
            this.style["Moz"+property] = value;
            this.style["ms"+property] = value;
            this.style["O"+property] = value;
            this.style[property.toLowerCase()] = value;
        }else{
            return window.getComputedStyle(this).getPropertyValue(
                    ("webkit"+property)||("Moz"+property)||("ms"+property)||("O"+property)||property);
                    //老實(shí)說(shuō)，我不知道為什么要把不帶瀏覽器標(biāo)記的放在最后，既然都這么用，我也這么做吧。不過(guò)這樣對(duì)現(xiàn)代瀏覽器來(lái)說(shuō)可能并不好，判斷次數(shù)變多了
        }
        
        //首字母大寫(xiě)
        function capitalize(word){
            return word.charAt(0).toUpperCase() + word.slice(1);
        }
    }

jQuery實(shí)現(xiàn)

    $(function(){

        var percent = parseInt($(".mask :first-child").text());
        var baseColor = $(".circle-bar").css("background-color");

        if( percent<=50 ){
            $(".circle-bar-right").css("transform","rotate("+(percent*3.6)+"deg)");
        }else {
            $(".circle-bar-right").css({
                "transform":"rotate(0deg)",
                "background-color":baseColor
            });
            $(".circle-bar-left").css("transform","rotate("+((percent-50)*3.6)+"deg)");
        }
    })

jQuery這么簡(jiǎn)單好用，為什么還要寫(xiě)JavaScript？

一來(lái)，學(xué)習(xí)JavaScript的使用，畢竟有些方法可能是不太熟悉的，多查查文檔，混個(gè)眼熟。
二來(lái)，萬(wàn)一項(xiàng)目中不需要使用jQuery呢，以后還得實(shí)現(xiàn)。

在規(guī)定圓的大小的時(shí)候，使用了font-size屬性，而長(zhǎng)度大小則基于font-size，也就是em為單位，這樣有一個(gè)好處，只要修改font-size的值，就可以改變圓的大小了，非常方便。

另外，寫(xiě)css的時(shí)候，盡可能將相同功能的代碼提取出來(lái)，將某個(gè)功能寫(xiě)在一個(gè){}中，起一個(gè)好名字，以后方便復(fù)用，bootstrap就是這么玩的，簡(jiǎn)潔、易讀，通過(guò)classname基本就能知道標(biāo)簽有哪些特性了。