您的位置:首页 > Web前端 > JavaScript

原生JS简单绘制一个圆形进度条

2018-10-23 13:28 525 查看

结构: 

[code]<div class="box"></div>

样式

[code]/*原形条*/
.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代码

[code] 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

实现原理链接:点我啦~~

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: