结构:
<div class="box"></div>
样式
/*原形条*/
.wrap,.circle,.num {width: 200px;height: 200px;border-radius: 50%;}
.wrap { position: relative; border: 10px solid #ccc;box-sizing: border-box;}
.circle { position: absolute; top: -10px; left: -10px; box-sizing: border-box;}
.circle div {width: 200px; height: 200px;position: absolute;box-sizing: border-box; border-radius: 50%;}
.num { position: absolute; top: -10px; left: -10px; line-height: 200px; text-align: center; font-size: 50px;}
.left { clip: rect(0, 100px, 200px, 0); border: 10px solid #f00;}
.right {clip: rect(0, 200px, 200px, 100px); border: 10px solid #f00;}
JS代码
function Yuan(element,num){
this.box = element;//获取节点
this.box.className = 'wrap';
//创建节点circle
this.circle = document.createElement("div");
this.circle.className = "circle";
this.box.appendChild(this.circle);
//创建circle的子节点left
this.left = document.createElement("div");
this.left.className = "left";
this.circle.appendChild(this.left);
//创建circle的子节点right
this.right = document.createElement("div");
this.right.className = "right";
this.circle.appendChild(this.right);
//创建节点num
this.num = document.createElement("div");
this.num.className = "num";
this.box.appendChild(this.num);
this.num.innerHTML = '<span class="">'+ num +'</span>%';
this.jz(num);
}
Yuan.prototype.jz = function(num){
var i = 0;
var that = this;
var int = setInterval(function(){
that.gx( num/10*i );
i++;
if(i>10){
clearInterval(int)
}
},0);//这里可以修改绘制进度的时间
}
Yuan.prototype.gx = function(n){
if(n <= 50) {
this.right.style.display = 'none';
this.circle.style.clip = 'rect(0, 200px, 200px, 100px)';
} else {
this.right.style.display = 'block';
this.circle.style.clip = 'rect(auto, auto, auto, auto)';
}
this.left.style.transform = 'rotate(' + n * 360 / 100 + 'deg)';
}
let box = new Yuan(document.querySelector('.box'),78);
转载自https://blog.csdn.net/cjp66666666666/article/details/80594664
实现原理链接:点我啦~~