利用js、jQuery和css实现环形进度条组件封装

效果图：

html：

<html> 
<head> 
<title>进度条</title> 
<link rel="stylesheet" type="text/css" href="./myScript.css">
<script type="text/javascript" src="./jquery.js"></script>

<script type="text/javascript" src="./Chart.js"></script>
<body> 
<p>设置百分比: <input type="text" id="tex1" value=""></p>
<p>设置颜色: <input type="text" id="col1" value=""></p>
<p>设置文本: <input type="text" id="tex2" value=""></p>
<script type="text/javascript" src="./myScript.js"></script>
</body>
</html>

js：

<pre name="code" class="javascript">function ProcessBar() {

	this.Container = $("<div>");
	this.Container.addClass("Container");

	this.circle = $("<div>");
	this.circle.addClass("circle");

	this.pie_left = $("<div>");
	this.pie_left.addClass("pie_left");

	this.left = $("<div>");
	this.left.addClass("left");

	this.pie_right = $("<div>");
	this.pie_right.addClass("pie_right");

	this.right = $("<div>");
	this.right.addClass("right");

	this.mask = $("<div>");
	this.mask.addClass("mask");
	this.mask2 = $("<div>");
	this.mask2.addClass("mask2");

	this.Container.append(this.circle);
	this.circle.append(this.pie_left);
	this.pie_left.append(this.left);
	this.circle.append(this.pie_right);
	this.pie_right.append(this.right);
	this.circle.append(this.mask);
	this.circle.append(this.mask2);
	this.mask2.append("总1000GB");

}

/*----------------设置百分比进度-----------------------*/
ProcessBar.prototype.setProgress = function(num) {
	num = num * 3.6;
	if (num <= 180) {
		this.mask.text(num / 3.6 + "%");
		this.left.css('transform', "rotate(0deg)");
		this.right.css('transform', "rotate(" + num + "deg)");
	} else {
		this.mask.text(num / 3.6 + "%");
		this.right.css('transform', "rotate(180deg)");
		this.left.css('transform', "rotate(" + (num - 180) + "deg)");
	}
	
}


ProcessBar.prototype.setColor = function(color) {
	
	this.circle.css('background',color);	
}


var processBar = new ProcessBar();

$(document.body).append(processBar.Container);

/*-----------------------------接口-----------------------------*/
//processBar.setProgress(num);//改变百分比
//processBar.setColor(color);//改变颜色
//processBar.mask2.text(text);//改变文本

/*--------------------------------------------------------------*/

window.setInterval(function() {
	var num = $("#tex1").val();
	var color = $("#col1").val();
	var text = $("#tex2").val();
	//设置进度
	if (num > 0 && num <= 100) {
		processBar.setProgress(num);
	} else {
		processBar.setProgress(0);
	}	
	
	processBar.setColor(color);
	
	
	
	
}, 20);

css：

.Container{
	top:50px;
	left:500px;
	width: 120px;
	height: 120px;
	position: absolute;
	border-radius: 50%;
	
}


.circle {
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50%;
	background: #808080;
}

.pie_left,.pie_right {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.left,.right {
	display: block;
	width: 100%;
	height: 100%;
	background: #c0c0c0;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	
}

.pie_right,.right {
	clip: rect(0, auto, auto, 60px);
}

.pie_left,.left {
	clip: rect(0, 60px, auto, 0);
}

.mask {
	width: 86%;
	height: 86%;
	border-radius: 50%;
	left: 7%;
	top: 7%;
	background: #FFF;
	position: absolute;
	text-align: center;
	line-height: 80px;
	font-size: 35px;
}

.mask2 {
	width: 86%;
	height: 86%;
	border-radius: 50%;
	left: 7%;
	top: 7%;
	position: absolute;
	text-align: center;
	line-height: 130px;
	font-size: 16px;
}

更多相关文章

随机推荐