css3自定义圆环

最新推荐文章于 2022-12-28 14:11:48 发布

牟云飞

最新推荐文章于 2022-12-28 14:11:48 发布

阅读量1.2k

点赞数

分类专栏：移动开发微信

本文为博主牟云飞原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/myfmyfmyfmyf/article/details/78032557

版权

移动开发同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

微信

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
	<TITLE> 圆环 </TITLE>
	<style>
		.circle_bg{
			width:200px;
			height:200px;
			border:18px solid #999999;
			border-radius:50%;
		}
		.wrapper{
			width: calc(100px + 18px);
			background-color:transparent;
			height: calc(200px + 18px*2);
			margin-top: -18px;
			position: relative;
			top:0;
			float:left;
			overflow:hidden;
		}
		.left{
			margin-left: -18px;
		
		}
		.right{
			margin-right: -18px;
			
		}
		.numVal{
		position:relative;
		top:-65%;
		left:45%;
		}
		.circle_right{
			width:200px;
			height:200px;
			border:calc(20px - 2px) solid transparent;
			border-top:calc(20px - 2px) solid green;
			border-right:calc(20px - 2px) solid green;
			margin-left: calc(-100px - 18px);
			border-radius:50% ;
			-webkit-transform: rotate(-135deg);
		}

		.circle_left{
			width:200px;
			height:200px;
			border:calc(20px - 2px) solid transparent;
			border-left:calc(20px - 2px) solid green;
			border-bottom:calc(20px - 2px) solid green;
			border-radius:50%;
			-webkit-transform: rotate(-135deg);
		}
	</style>
 </HEAD>
 <BODY>
  <div class = "circle_bg" >
		<div class = "wrapper left" >
			<div class = "circle_left" ></div>
		</div>
		<div class = "wrapper right" >
			<div class = "circle_right" ></div>
		</div>
		<div class = "numVal" >0%</div>
  </div>
  <div>
	  <div>改变颜色：</div>
	  <div onClick="changeColor('red')">red</div>
	  <div onClick="changeColor('green')">green</div>
	  <div onClick="changeColor('yellow')">yellow</div>
	  <div onClick="changeColor('blue')">blue</div>
  </div>
   <div>
	  <div>改变值：</div>
	  <div onClick="changeValue(10)">10</div>
	  <div onClick="changeValue(25)">25</div>
	  <div onClick="changeValue(40)">40</div>
	  <div onClick="changeValue(80)">80</div>
  </div>
  <script SRC="G://jquery-2.1.1.min.js"></script>
  <script>
		//改变颜色
		function changeColor(curColor){
			$(".circle_right").css("border-top-color",curColor);
			$(".circle_right").css("border-right-color",curColor);
			$(".circle_left").css("border-left-color",curColor);
			$(".circle_left").css("border-bottom-color",curColor);
		}
		//改变值
		function changeValue(curValue){
			if(curValue<=50){
				var rightVal=-135+(parseFloat(180)/parseFloat(50))*parseFloat(curValue);
				var leftVal=-135;
				$(".circle_right").css("-webkit-transform","rotate("+rightVal+"deg)");
				$(".circle_left").css("-webkit-transform","rotate("+leftVal+"deg)");
			}else if(curValue>50&&curValue<=100){
				var rightVal=45;
				var leftVal=-135+(parseFloat(180)/parseFloat(50))*parseFloat(curValue-50);
				$(".circle_right").css("-webkit-transform","rotate("+rightVal+"deg)");
				$(".circle_left").css("-webkit-transform","rotate("+leftVal+"deg)");
			}
			$(".numVal").html(curValue+"%");
		}
  </script>
 </BODY>
</HTML>