HTML+CSS 实现环形比例图效果

最新推荐文章于 2024-08-05 17:30:48 发布

羽筠

最新推荐文章于 2024-08-05 17:30:48 发布

阅读量1.7w

点赞数 4

分类专栏： HTML + CSS + JS HTML5

本文链接：https://blog.csdn.net/qq_16494241/article/details/50681256

版权

HTML5 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

HTML + CSS + JS

40 篇文章 2 订阅

订阅专栏

HMTL代码

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百分比</title>
<style type="text/css">
.yuan{ width: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{ width: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{ width: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="jquery2.1.js"></script>
</head>
<body>
<div class="yuan">
    <div class="yuan_bl1"></div>
    <div class="yuan_text">81°</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>

环形倒计时

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>环形倒计时</title>
<style type="text/css">
html{ height: 100%;}
body{ background-color: #ff90b8; width: 100%; height: 100%;
	display: flex; justify-content: center; align-items: center;
}
*{ margin: 0; padding: 0; box-sizing: border-box;}
/* 计时区 */
.question_time_box{ width: 96px; height: 96px; border-radius: 50%; border: #fff solid 4px; background-color: #FB597C; position: relative;}
/*  */
.yuan_bl1 , .yuan_bl2 , .yuan_bl3 , .yuan_bl4{ width:100%; height:100%; border-radius:50%; position:absolute; left:0; top:0;}
.yuan_bl1 , .yuan_bl2{ background-color:#fff;
	-webkit-transform: scale(1.01) rotate(90deg);
			transform: scale(1.01) rotate(90deg);
}
.yuan_bl3 , .yuan_bl4{ background-color: #FB597C;}
.yuan_bl1 , .yuan_bl3{ clip:rect(0 88px 44px 0);}
.yuan_bl2 , .yuan_bl4{ clip:rect(44px 88px 88px 0);}
/*  */
.question_time{ width:66px; height:66px; color: #d60017; font-weight: bold; border-radius: 50%; border: #fff solid 4px; background-color: #ffd2d4; position: absolute; left: 50%; top: 50%;
	-webkit-transform: translate(-50% , -50%);
			transform: translate(-50% , -50%);
	display: flex; justify-content: center; align-items: center;
}

</style>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div class="question_time_box">
	<div class="yuan_bl1"></div>
	<div class="question_time">7s</div>
</div>
<script>
//倒计时相关设置
var baseTime = 10; //每关用时
var timer , timestart = baseTime;
function djs(){
	if (timestart < 0){
		//return;
		timestart = baseTime;
	}
	
	setTimeRoate();
	
	$('.question_time').html(timestart + 's');
	var newtime = parseInt(timestart) - 1;
	timestart = newtime;
	timer = setTimeout(djs, 1000);
}

//开始执行倒计时
djs();

//设置倒计时展示角度
function setTimeRoate(){
	$('.yuan_bl1').empty();
	$('.yuan_bl2').remove();
	var bl = (baseTime - timestart) * (360/baseTime)
	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>