0

我写了一个馅饼进度条。我在网上找到了css并根据需要修改了代码。有效。但是当我尝试将饼图的大小减小到 65 像素（高度/宽度）或等效 em 时，饼图进度条无法按预期工作。

出于某种原因，这没有显示出来。显示在浏览器窗口中。

CSS：

        .score {
            position: absolute;
            z-index: 1;
            font-size: 200px;
            width:0.8em;
            height:0.8em;
            float: left;

            -moz-border-radius: 102px;
            -webkit-border-radius: 102px;
            border-radius: 102px;
        }
        .best {
            border: 20px solid #008000;
            background-color: #339928;
        }
        .best .pie {
            border: 0.1em solid #89DA81;
        }
        .best .pie-color {
            background-color: #339928;
        }           
        .score .circle-num {
            position: absolute;
            top: 42px;
            left: -16px;
            width: 3.33em;
            font-size: 0.3em;
            text-align:center;
            z-index: 20;
        }
        .score .slice {
            position:absolute;
            width:1em;
            height:1em;
            clip:rect(0px,1em,1em,0.5em);
            top: -20px;
            left: -20px;
        }
        .score .slice.score50 {
            clip:rect(auto, auto, auto, auto);
        }
        .score .slice > .pie {
            position:absolute;
            width:0.8em; /* 1 - (2 * border width) */
            height:0.8em; /* 1 - (2 * border width) */
            clip:rect(0em,0.5em,1em,0em);
            -moz-border-radius:0.5em;
            -webkit-border-radius:0.5em; 
            border-radius:0.5em; 
        }
        .score .slice > .pie.fill {
            -moz-transform:rotate(180deg) !important;
            -webkit-transform:rotate(180deg) !important;
            -o-transform:rotate(180deg) !important;
            transform:rotate(180deg) !important;
        }

        .pie-color {
            background-color: #339928;
        }

HTML：

    <div class="score best">
            <div class="circle-num"></div>
            <div class="slice">
                <div class="pie pie-color"></div>
            </div>
    </div>

JS：

$(document).ready(function(){
var scorenum = 15, output = $('.circle-num');

drawPie(scorenum);

function drawPie (scorenum) {
    var val = scorenum;
    output.html(val);
    if (val >= 50) {
                $('.slice').addClass('score50').append('<div class="pie fill pie-color"></div>');
    }

    var deg = 360/100*scorenum;
    $('.pie').css({
        '-moz-transform':'rotate('+deg+'deg)',
        '-webkit-transform':'rotate('+deg+'deg)',
        '-o-transform':'rotate('+deg+'deg)',
        'transform':'rotate('+deg+'deg)'
    });
}

});
4

0 回答 0