jquery圆环百分比进度条制作

最新推荐文章于 2023-11-06 11:06:28 发布

lvxinaidou

最新推荐文章于 2023-11-06 11:06:28 发布

阅读量626

点赞数

分类专栏： jQuery CSS

本文链接：https://blog.csdn.net/lvxinaidou/article/details/96848444

版权

CSS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

@jquery圆环百分比进度条制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>统计信息Pie的显示css版本</title>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<style>
			.circle {
				width:200px;
				height: 200px;
				position: absolute;
				border-radius: 50%;
				background: #00AACC;
			}
			.pie-left, 	.pie-right {
				width: 200px;
				height: 200px;
				position: absolute;
				left:0px;
				right: 0px;
			}
			.left, .right {
				display: block;
				width: 200px;
				height: 200px;
				background: #0cc;
				border-radius: 50%;
				position: absolute;
				left:0px;
				top:0px;
				/*旋转30度*/
				/*transform: rotate(30deg);*/
			}
			.pie-right, .right {
			    clip:rect(0,auto,auto,100px);
			}
			.pie-left, .left {
				/*截图工具 top rigt,bottom, left*/
		    	clip:rect(0,100px,auto,0);
			}
			.mask {
				width:150px;
				height: 150px;
				line-height: 150px;
				border-radius: 50%;
				position: absolute;
				left: 25px;
				top:25px;
				background: #fff;
				text-align: center;
				font-size: 16px;
			}
			.circle-wraps {
				width: 80%;
				margin:auto;
			}
			.circle-wrap {
				display: inline-block;
				margin-left: 200px;
			}
		</style>
	</head>
	<body>
		<div class="circle-wraps">
			<div class="circle-wrap">
			<div class="circle">
				<div class="pie-left">
					<div class="left"></div>
				</div>
				<div class="pie-right">
					<div class="right"></div>
				</div>
				<div class="mask"><span></span>%</div>
			</div>
		</div>
		<div class="circle-wrap">
			<div class="circle">
				<div class="pie-left">
					<div class="left"></div>
				</div>
				<div class="pie-right">
					<div class="right"></div>
				</div>
				<div class="mask"><span></span>%</div>
			</div>
		</div>
		<div class="circle-wrap">
			<div class="circle">
				<div class="pie-left">
					<div class="left"></div>
				</div>
				<div class="pie-right">
					<div class="right"></div>
				</div>
				<div class="mask"><span></span>%</div>
			</div>
		</div>
		<div class="circle-wrap">
			<div class="circle">
				<div class="pie-left">
					<div class="left"></div>
				</div>
				<div class="pie-right">
					<div class="right"></div>
				</div>
				<div class="mask"><span></span>%</div>
			</div>
		</div>
		</div>
		
		<script>
			$(function() {
				let nums = [];
				nums[0] = Number(50/53*100).toFixed(3);
				nums[1] = Number(48/53*100).toFixed(3);
				nums[2] = Number(2/53*100).toFixed(3);
				nums[3] = Number(3/53*100).toFixed(3);
				console.log(nums);
			    $('.circle').each(function(index, el) {
			    	console.log($('.circle'));
			    	console.log(index);
			        $(this).find('span').text(nums[index]);
			         var num = $(this).find('span').text() * 3.6;
			        console.log(num);
			        if (num<=180) {
			            $(this).find('.right').css('transform', "rotate(" + num + "deg)");
			        } else {
			            $(this).find('.right').css('transform', "rotate(180deg)");
			            $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
			        };
			    });
			});
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述
参考学习网址：http://caibaojian.com/jquery-circular-progress.html