zoukankan html css js c++ java

css圆环百分比

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			.yuanhaun {
				 200px;
				height: 200px;
				margin: 0 auto;
				box-sizing: border-box;
				position: relative;
				border: 1px solid red;
				position: relative;
				border-radius: 50%;
			}
			
			.huan1 {
				background: red;
				position: absolute;
				left: 0px;
				top: 0px;
				border-radius: 50%;
				clip: rect(0px 200px 200px 100px);
				 100%;
				height: 100%;
				z-index: 10;
			}
			
			.huan1mask {
				background: green;
				position: absolute;
				left: 0px;
				top: 0px;
				border-radius: 50%;
				clip: rect(0px 200px 200px 100px);
				 100%;
				height: 100%;
				z-index: 100;
			}
			
			.huan2 {
				background: red;
				position: absolute;
				left: 0px;
				top: 0px;
				border-radius: 50%;
				clip: rect(0px 100px 200px 0px);
				 100%;
				height: 100%;
				z-index: 10;
			}
			
			.huan2mask {
				background: green;
				position: absolute;
				left: 0px;
				top: 0px;
				border-radius: 50%;
				clip: rect(0px 100px 200px 0px);
				 100%;
				height: 100%;
				z-index: 100;
			}
			
			.text {
				 160px;
				height: 160px;
				position: absolute;
				top: 20px;
				left: 20px;
				background: yellow;
				border-radius: 50%;
				line-height: 160px;
				text-align: center;
				z-index: 200;
			}
		</style>
        <script src="js/yuanhuan.js"></script>
		<script type="text/javascript">
			$(function() {
				/*var du = parseInt($(".text").text());
				if(du > 360) {
					du = du % 360;
				}
				if(du % 360 == 0) {
					$(".huan2mask,.huan1mask").hide();
				} else if(du >= 180 && du < 360) {
					$(".huan1mask").hide();
					$(".huan1").css('z-index', "200");
					$(".huan2mask").css("transform", 'rotate(' + (du - 180) + 'deg)');
				} else if(du > 0 && du < 180) {
					$(".huan1mask").css("transform", 'rotate(' + du + 'deg)');
				}*/
				$("#yuanhuan").yuanhuan();
			})
		</script>
	</head>

	<body>
		<div id="yuanhuan" class="yuanhaun">
			<!--<div class="huan1"></div>
			<div class="huan1mask"></div>
			<div class="huan2"></div>
			<div class="huan2mask"></div>
			<p class="text">480</p>-->
		</div>
	</body>

</html>

　　插件：

;
(function($) {
	$.fn.yuanhuan = function(opt) {
		var local_opt = {
			 "200px",
			height: "200px",
			autoplus: false,
			time: 3,
			du: "260度",
			fun: function() {
				console.log("is ok");
			}
		}

		var obj = $.extend({}, local_opt, opt);
		var du = parseInt(obj.du);
		var timer = parseInt(obj.time / du);
		var html = '<div class="huan1"></div><div class="huan1mask"></div><div class="huan2"></div><div class="huan2mask"></div><p class="text"></p>';
		$(this).html(html);

		var deg = 0;
		var stln = setInterval(function() {
			if(deg < du) {
				aa(++deg);
			} else {
				clearInterval(stln);
				obj.fun();
			}
		}, timer);

		function aa(du) {
			if(du % 360 == 0) {
				$(".huan2mask,.huan1mask").hide();
			} else if(du >= 180 && du < 360) {
				$(".huan1mask").hide();
				$(".huan1").css('z-index', "200");
				$(".huan2mask").css("transform", 'rotate(' + (du - 180) + 'deg)');
				$('.text').text(du);
			} else if(du >= 0 && du < 180) {
				$(".huan1mask").css("transform", 'rotate(' + du + 'deg)');
				$('.text').text(du);
			}
		}
	}

})($ || jQuery || Zepto)

　　参考：

<!DOCTYPE html>  
<html lang="cn">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
    *{  
        margin: 0;  
        padding: 0;  
    }  
    .wrap,.circle,.percent{  
        position: absolute;  
         200px;  
        height: 200px;  
        border-radius: 50%;  
    }  
    .wrap{  
        top:50px;  
        left:50px;  
        background-color: #ccc;  
    }  
    .circle{  
        box-sizing: border-box;  
        border:20px solid #ccc;  
        clip:rect(0,200px,200px,100px);  
    }  
    .clip-auto{  
        clip:rect(auto, auto, auto, auto);  
    }  
    .percent{  
        box-sizing: border-box;  
        top:-20px;  
        left:-20px;  
    }  
    .left{  
        transition:transform ease;  
        border:20px solid blue;  
        clip: rect(0,100px,200px,0);  
    }  
    .right{  
        border:20px solid blue;  
        clip: rect(0,200px,200px,100px);  
    }  
    .wth0{  
        0;  
    }  
    .num{  
        position: absolute;  
        box-sizing: border-box;  
         160px;  
        height: 160px;  
        line-height: 160px;  
        text-align: center;  
        font-size: 40px;  
        left: 20px;  
        top: 20px;  
        border-radius: 50%;  
        background-color: #fff;  
        z-index: 1;  
    }  
    </style>  
    <script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>  
</head>  
<body>  
<div class="wrap">  
    <div class="circle">  
        <div class="percent left"></div>  
        <div class="percent right wth0"></div>  
    </div>  
    <div class="num"><span>0</span>%</div>  
</div>  
</body>  
<script>  
    var percent=0;  
    var loading=setInterval(function(){  
        if(percent>100){  
            percent=0;  
            $('.circle').removeClass('clip-auto');  
            $('.right').addClass('wth0');  
        }else if(percent>50){  
            $('.circle').addClass('clip-auto');  
            $('.right').removeClass('wth0');  
        }  
        $('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");  
        $('.num>span').text(percent);  
        percent++;  
    },200);  
</script>  
</html>

<!doctype html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>百分比</title>
		<style type="text/css">
			.yuan {
				 200px;
				height: 200px;
				margin: 0 auto;
				box-sizing: border-box;
				padding-top: 20px;
				text-align: center;
				background-color: #f1f1f1;
				border-radius: 50%;
				position: relative;
			}
			
			.yuan_bl1,
			.yuan_bl2,
			.yuan_bl3,
			.yuan_bl4 {
				 100%;
				height: 100%;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.yuan_bl1,
			.yuan_bl2 {
				background-color: #FF7F4C;
				-webkit-box-shadow: 0 0 1px 1px #fff inset;
				box-shadow: 0 0 1px 1px #fff inset;
			}
			
			.yuan_bl3,
			.yuan_bl4 {
				background-color: #f1f1f1;
			}
			
			.yuan_bl1,
			.yuan_bl3 {
				clip: rect(0 200px 100px 0);
			}
			
			.yuan_bl2,
			.yuan_bl4 {
				clip: rect(100px 200px 200px 0);
			}
			
			.yuan_text {
				 160px;
				height: 160px;
				line-height: 160px;
				box-sizing: border-box;
				padding-left: 10px;
				margin: 0 auto;
				color: #FF7F4C;
				font-size: 36px;
				font-family: "PingFangSC-Thin", "sans-serif", "STHeitiSC-Light", "微软雅黑", "Microsoft YaHei";
				background-color: #fff;
				border-radius: 50%;
				position: relative;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	</head>

	<body>
		<div class="yuan">
			<div class="yuan_bl1"></div>
			<div class="yuan_text">36°</div>
		</div>
		<script>
			$(function() {
				//初始化  
				var bl = parseInt($('.yuan_text').html());
				var rotatenum = bl;
				if(bl > 180) {
					var blhtml = '';
					rotatenum = bl - 180;
					blhtml += '<div class="yuan_bl2">';
					blhtml += '<div class="yuan_bl4" style="-webkit-transform:rotate(' + rotatenum + 'deg);transform:rotate(' + rotatenum + 'deg);"></div>';
					blhtml += '</div>';
					//$('.yuan_bl1').remove($('.yuan_bl3'));  
					$('.yuan_bl1').after(blhtml);
				} else {
					var blhtml = '';
					blhtml += '<div class="yuan_bl3" style="-webkit-transform:rotate(' + rotatenum + 'deg);transform:rotate(' + rotatenum + 'deg);"></div>';
					$('.yuan_bl1').append(blhtml);
				}
			})
		</script>
	</body>

</html>

查看全文

相关阅读:
ADO 缓存更新
 DBNavigator中把insert变为append
JQuery 选择器
 VS2013默认打开HTML文件没有设计视图
 windows 关机重启命令
 java如何计算两个日期之间相差多少天？
java的list集合操作List<T>转化List<Long>
ExcelUtil工具类
 oracle的START WITH CONNECT BY PRIOR用法
 oracle的with as用法

原文地址：https://www.cnblogs.com/libin-1/p/6092147.html