环形进度条在网上很多都是基于jQuery实现的，如果在不使用jQuery的情况下，仅用js+css如何实现环形进度条呢？
天蓬老师2017-04-10 16:06:32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
font-family: "微软雅黑";
}
.circle {
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
background: #0cc;
}
.pie_left, .pie_right {
width:200px;
height:200px;
position: absolute;
top: 0;left: 0;
}
.left, .right {
width:200px;
height:200px;
background:#00aacc;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
.pie_right, .right {
clip:rect(0,auto,auto,100px);
}
.pie_left, .left {
clip:rect(0,100px,auto,0);
}
.mask {
width: 150px;
height: 150px;
border-radius: 50%;
left: 25px;
top: 25px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 150px;
font-size: 20px;
font-weight: bold;
color: #00aacc;
}
</style>
</head>
<body>
<p class="circle" style="left:0">
<p class="pie_left"><p class="left"></p></p>
<p class="pie_right"><p class="right"></p></p>
<p class="mask"><span>0</span>%</p>
</p>
<script type="text/javascript">
//addPercent(30);
function addPercent(num){
if(num>100)return;
var c=document.getElementsByClassName("circle")[0];
c.getElementsByTagName("span")[0].innerHTML=num;
num=num*3.6;
if(num<=180){
c.getElementsByClassName("right")[0].style.transform="rotate(" + num + "deg)";
}else{
c.getElementsByClassName("right")[0].style.transform="rotate(180deg)";
c.getElementsByClassName("left")[0].style.transform="rotate(" + (num - 180) + "deg)";
}
}
var count=0;
var t=setInterval(function(){
if(count>100){
clearInterval(t);
}
addPercent(++count);
},200);
</script>
</body>
</html>这个随便找个就能翻译成js的。。还有就是我简单翻译了一下没有封装，没有管怎么调用