css圆圈样式记分数（100分）天数（30天）等

css:

       .yuan {
           width: 76px;
           height: 76px;
           margin: 4.7px auto 0;
           box-sizing: border-box;
           padding-top: 8px;
           text-align: center;
           background-color: #CFDDFC;
           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;
            transform: rotate(90deg);
        }

        .yuan_bl1,
        .yuan_bl2 {
            background-color: #CFDDFC;
        }

        .yuan_bl3,
        .yuan_bl4 {
            background-color: #CFDDFC;
        }

        .yuan_bl1,
        .yuan_bl3 {
            clip: rect(0 76px 38px 0);
        }

        .yuan_bl2,
        .yuan_bl4 {
            clip: rect(38px 76px 76px 0);
        }

        .yuan_text {
            width: 60px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 50%;
            position: relative;
            font-family: PingFangSC-Regular;
            font-size: 20px;
            color: #0B1434;
            letter-spacing: 0;
            text-align: center;
            height: 60px;
            line-height: 60px;
        }

html:

       

       
       
{$curMonthSignInDays}
    

js:

function ball(){
            let yuan_text = $('.yuan_text')
            let bl = parseInt($(yuan_text).html());
            let rotatenum = bl;
            if(bl > 15){
                let blhtml = '';
                rotatenum = parseInt((bl - 15) * 12);  //以天数*12 分数时则为*3.6
                blhtml += '
';
                blhtml += '
';
                blhtml += '
';
                //$('.yuan_bl1').remove($('.yuan_bl3'));
                $('.yuan_bl1').after(blhtml);
            }else{
                let blhtml = '';
                rotatenum = parseInt(bl * 12);  //以天数*12 分数时则为*3.6
                blhtml += '
';
                $('.yuan_bl1').append(blhtml);
            }
            $(".yuan_bl1").css({ "background-color":"#739CFF"});
        }

css圆圈样式记分数（100分）天数（30天）等 实际为360角度
如果需要变动css宽高 clip: rect(0 76px 38px 0); 76：宽度 38：宽度/2