前端实现半圆进度条数据动态展示js

最新推荐文章于 2023-11-01 11:36:36 发布

℡仅此、而已

最新推荐文章于 2023-11-01 11:36:36 发布

阅读量1.5k

点赞数 2

分类专栏：前端小强踩坑之路文章标签： html jquery css

本文链接：https://blog.csdn.net/Hzq88888/article/details/122328960

版权

前端小强踩坑之路专栏收录该内容

60 篇文章 4 订阅

订阅专栏

效果图示例：

html代码：

<div class="bigBox">
    <div class="box1">100</div>
    <div class="box2"></div>
    <div class="box3"><span class="smallBorder"></span></div>
</div>

css代码：

.box2{
	box-sizing:border-box;
	border:10px solid #fff;
	border-top-left-radius:80px;
	border-top-right-radius:80px;
	width:160px;
	height:80px;
	border-bottom:none;
}
.box3{
	position:relative;
	top:-80px;
	z-index:10;
	height:80px;
	width:160px;
	border:10px solid rgb(247,203,82);
	box-sizing:border-box;
	border-top-left-radius:80px;
	border-top-right-radius:80px;
	border-bottom:none;
	transform-origin:50%  100%;
	transform:rotate(-180deg);
	transition:all 1s;
}
.bigBox{
	width:160px;
	height:80px;
	overflow:hidden;
	position:relative;
}
.box1{
    font-size:40px;
    color:#fff;
	height:60px;
	text-align:center;
	position:absolute;
	top:20px;
	left:0;
	width:100%;
}
.smallBorder{
	width:20px;
	height:20px;
	border-radius:50%;
	background:#fff;
	position:absolute;
	right:-15px;
	bottom:-3px;
}

js代码：

//此变量为百分之几1为100%
var data= 0.2;
var getData;
getData= 180 * data- 180;
$(function() {
    $('.box3').css({
        "transform": "rotate(" + (getData) + "deg)"
    })
})