html代碼如下：
<p class="progress_wrap js_halfClassNameObj">
<p class="right under">
<p class="circleProgress rightcircle"></p>
</p>
<p class="left under">
<p class="circleProgress leftcircle"></p>
</p>
<p class="right up">
<p class="circleProgress rightcircle js_progressRight" style="-webkit-transform:rotate(' circleData.rightRotate.toString() 'deg)"></p>
</p>
<p class="left up">
<p class="circleProgress leftcircle js_progressLeft" style="-webkit-transform:rotate(' circleData.leftRotate.toString() 'deg)"></p>
</p>
//percent小于50時需要使用遮罩進(jìn)行遮擋超出環(huán)形范圍部分
<p class="left up_left_cover js_giftLeftCover" style="display:' circleData.leftCircleDisplay '">
<p class="circleProgress leftcircle color_border_t_l04"></p>
</p>
<p class="num">
<p>剩余</p>
<p class="js_giftPercent">' circleData.percent '%</p>
</p>
</p>
css代碼：
.progress_wrap{
position: relative;
margin:0 0 0 .14rem;
width:.92rem;height:.92rem;
//little和more用來展示黃色和綠色的效果
&.little{
.under{
.rightcircle,.leftcircle{
border-top:$progress_border_under_little;
}
.rightcircle{
border-right:$progress_border_under_little;
}
.leftcircle{
border-left:$progress_border_under_little;
}
}
.up{
.rightcircle,.leftcircle{
border-top:$progress_border_up_little;
}
.rightcircle{
border-right:$progress_border_up_little;
}
.leftcircle{
border-left:$progress_border_up_little;
}
}
//用遮擋實現(xiàn)左側(cè)剩余百分比，遮住超出環(huán)形范圍部分；核心是使用同心圓進(jìn)行邊框進(jìn)行遮擋
.up_left_cover{
width:.47rem;height:.92rem;
.leftcircle{
top:-.02rem;
width:.74rem;height:.74rem;
border:.11rem solid transparent;
border-top:$progress_border_up_left_cover_little;
border-left:$progress_border_up_left_cover_little;
//實際值為195deg,被遮擋環(huán)顏色值深有光暈,需要將角度進(jìn)行微調(diào)（-191deg）進(jìn)行完全遮擋
-webkit-transform:rotate(-191deg);
}
}
}
&.more{
.under{
.rightcircle,.leftcircle{
border-top:$progress_border_under;
}
.rightcircle{
border-right:$progress_border_under;
}
.leftcircle{
border-left:$progress_border_under;
}
}
.up{
.rightcircle,.leftcircle{
border-top:$progress_border_up;
}
.rightcircle{
border-right:$progress_border_up;
}
.leftcircle{
border-left:$progress_border_up;
}
}
}
.right,.left{
position: absolute;top:0;overflow:hidden;
width:.46rem;height:.92rem;
.circleProgress{
position: absolute; top:0;
width: .78rem; height: .78rem;
border:.07rem solid transparent; border-radius: 50%;
}
.rightcircle{
right:0;
-webkit-transform: rotate(15deg);
}
.leftcircle{
left:0;
-webkit-transform: rotate(-15deg);
}
}
.right{
right:0;
}
.left{
left:0;
}
.num{
position: absolute;left:50%;top:50%;
width:.5rem;
transform:translate(-50%,-50%);
font-size:.12rem;color:$public_auxiliary_col;text-align:center;line-height:.26rem;
}
}
js代碼：
function giftCircleProgressFn(per){
var circleData = {};
var percent = parseInt(per);
//領(lǐng)取進(jìn)度環(huán)形顏色className
var halfClassName = percent<50?"little":"more";
//左半環(huán)遮罩層顯示樣式狀態(tài)
var leftCircleDisplay = percent<50?"block":"none";
var leftRotate = 0;
var rightRotate = 0;
//以50%%u4E3A界限;<50%:%u53F3半圓占比為0,左半圓需要使用遮罩進(jìn)行遮擋,展示剩余部分
// >50%:%u5DE6半圓占比100%,%u53F3半圓直接使用百分比計算所占部分即可
//注意：在半圓中計算百分比時,要將百分比乘以2。
if(percent<50){
leftRotate = -15-180 150*(percent*2)/100;
rightRotate = -135;
}else{
leftRotate = -15;
rightRotate = -135 (150*((percent-50)*2)/100); //比例在半環(huán)計算需要*2倍
}
circleData = {
leftRotate:leftRotate, //左半環(huán)進(jìn)度
rightRotate:rightRotate, //右半環(huán)進(jìn)度
halfClassName:halfClassName, //50% %u8FDB度環(huán) 變色
leftCircleDisplay:leftCircleDisplay, //左半環(huán)遮罩
percent:per //進(jìn)度百分比
}
return circleData
}
環(huán)形旋轉(zhuǎn)角度換算需要根據(jù)不同需求進(jìn)行微調(diào)即可。
如有什么好的建議，歡迎多多交流呀。
更多關(guān)于云服務(wù)器，域名注冊，虛擬主機的問題，請訪問西部數(shù)碼官網(wǎng)：m.ps-sw.cn
