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

最新推荐文章于 2024-11-22 10:26:08 发布

原创最新推荐文章于 2024-11-22 10:26:08 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #圆圈分数

js 同时被 3 个专栏收录

14 篇文章

订阅专栏

html

12 篇文章

订阅专栏

css

11 篇文章

订阅专栏

本文介绍了一种使用CSS和JavaScript实现的圆形进度条设计方法，能够根据不同的数值动态调整旋转角度，适用于显示分数、天数等多种场景。

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:

<div class="yuan">
       <div class="yuan_bl1">
       </div>
       <div class="yuan_text">{$curMonthSignInDays}</div>
    </div>

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 += '<div class="yuan_bl2" style="background-color:#739CFF">';
                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{
                let blhtml = '';
                rotatenum = parseInt(bl * 12);  //以天数*12 分数时则为*3.6
                blhtml += '<div class="yuan_bl3" style="-webkit-transform:rotate(' + rotatenum + 'deg);transform:rotate(' + rotatenum + 'deg);"></div>';
                $('.yuan_bl1').append(blhtml);
            }
            $(".yuan_bl1").css({ "background-color":"#739CFF"});
        }

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