一、實現原理

首先，我們來一個圓(黑色)。

接著，再來兩個半圓，將黑色的圓遮住。(為了演示，左右兩側顏色不一樣)

這時候，我們順時針旋轉右側藍色的半圓，下面的黑色圓就會暴露出來，比如我們旋轉45度(12.5%)，效果出來了。

如果我們將藍色的右半圓同樣設置成灰色，看效果，一個12.5%的餅圖就出來了！

OK，我們再旋轉更大的度數試試，比如40%(144度)，50%(180度)，60%(216度)如下圖。

我們發現，旋轉180度之后右半圓與左半圓重合了，如果再旋轉，就會在右上角冒出來，顯然不是我們想要的。

我們希望的是，繼續旋轉被黑色遮住。。。嗯。。。怎么做呢？

我們將右側的圓回歸原位，把它刷成黑色(和底色一樣)，然后旋轉左邊的半圓(它在右側半圓的更底層)，這樣，它就會被右側半圓遮住了。好的，廢話不多說，我們將左側的半圓順時針旋轉45度，效果出來了。可以想象，繼續旋轉，180度的時候，就完全被右側半圓遮住，而左側底色全部暴露，這樣100%顯示出來了。

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

好的，到這里，我們已經明白如何實現的了。

二、代碼實現

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剪切了圓，實現左右兩個半圓，右半圓在后面，因此在更上一層，

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實現

//反正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);//背景色設置為進度條的顏色

right_circle.css3('transform','rotate(0deg)');//右側不旋轉

left_circle.css3 ('transform',rotate);//左側旋轉

}

}

//封裝了css3函數，主要是懶得重復書寫代碼，既然寫了css3函數，順便寫個css吧，統一樣式，好看一些

Element.prototype.css = function(property,value){

if ( value ) {

//CSS中像background-color這樣的屬性，‘-’在JavaScript中不兼容，需要設置成駝峰格式

var index = property.indexOf('-');

if( index != -1 ) {

var char = property.charAt(index+1).toUpperCase();

property.replace(/(-*){1}/,char);

}

this.style[property] = value;

}else{

//getPropertyValue()方法參數類似background-color寫法，所以不要轉駝峰格式

return window.getComputedStyle(this).getPropertyValue(property);

}

}

//封裝一個css3函數，用來快速設置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);

//老實說，我不知道為什么要把不帶瀏覽器標記的放在最后，既然都這么用，我也這么做吧。不過這樣對現代瀏覽器來說可能并不好，判斷次數變多了

}

//首字母大寫

function capitalize(word){

return word.charAt(0).toUpperCase() + word.slice(1);

}

}

jQuery實現

$(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這么簡單好用，為什么還要寫JavaScript？

一來，學習JavaScript的使用，畢竟有些方法可能是不太熟悉的，多查查文檔，混個眼熟。

二來，萬一項目中不需要使用jQuery呢，以后還得實現。

三、總結體會

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

另外，寫css的時候，盡可能將相同功能的代碼提取出來，將某個功能寫在一個{}中，起一個好名字，以后方便復用，bootstrap就是這么玩的，簡潔、易讀，通過classname基本就能知道標簽有哪些特性了。

總結

以上是生活随笔為你收集整理的前端 圆形进度图_CSS3+JS实现静态圆形进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。