css3+jq制作百分比圆环,扇形图(两种颜色)

如图所示
代码如下:

<html>
<head>
    <meta charset="UTF-8">
    <title>扇形绘制</title>
    <style>
        .muscle {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: #7ec2f3;
            z-index: 10;
        }
        .fat {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: #ffbb4f;
            top: 9px;
            left: 239px;
            z-index: 9;
        }
        .other  {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: #ff6260;
            top: 9px;
            left: 469px;
            z-index: 8;
        }
        .pre {
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 100px;
            background-color: #fff;
            top: 32px;
            left: 32px;
            z-index: 11;
        }
        .sx1{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
            clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆,在clip的rect范围内的内容显示出来,使用clip属性,元素必须是absolute的 */
            border-radius: 100px;
            background-color: #f00;
        }
        .sx2{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
            clip: rect(0px,100px,200px,0px);
            border-radius: 100px;
            background-color: #f00;
        }
        .muscle-sx3{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(30deg);
            clip: rect(0px,200px,200px,100px);
            border-radius: 100px;
            background-color: #7ec2f3;
        }
        .fat-sx3{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(30deg);
            clip: rect(0px,200px,200px,100px);
            border-radius: 100px;
            background-color: #ffbb4f;
        }
        .other-sx3{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(30deg);
            clip: rect(0px,200px,200px,100px);
            border-radius: 100px;
            background-color: #ff6260;
        }

</style>
</head>

<body>
<div class="muscle">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>

<div class="fat">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>

<div class="other">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<div class="pre"></div>
<script src="jquery-1.11.3.js"></script>
<script>
    $(function(){
        var muscle=30,fat=10,other=10;
        if(muscle>50){
            $(".muscle .sx2").addClass("muscle-sx3");
            $(".muscle .muscle-sx3").css("transform","rotate("+(muscle/5*18-180)+"deg)").css("color","#fff");
        }else{
            $(".muscle .sx2").css("transform","rotate("+(muscle/5*18-180)+"deg)").css("color","#fff");
        }
        if((fat+muscle)>50){
            $(".fat .sx2").addClass("fat-sx3");
            $(".fat .fat-sx3").css("transform","rotate("+((fat+muscle)/5*18-180)+"deg)").css("color","#fff");
        }else{
            $(".fat .sx2").css("transform","rotate("+((fat+muscle)/5*18-180)+"deg)").css("color","#fff");
        }
        if((other+fat+muscle)>50){
            $(".other .sx2").addClass("other-sx3");
            $(".other .other-sx3").css("transform","rotate("+((other+fat+muscle)/5*18-180)+"deg)").css("color","#fff");
        }else{
            $(".other .sx2").css("transform","rotate("+((other+fat+muscle)/5*18-180)+"deg)").css("color","#fff");
        }
    })
</script>
</body> 
</html>

提示:只有两种颜色,如果想要三种需要再加一个半圆。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘斩仙的笔记本

富贵险中求

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值