资讯专栏INFORMATION COLUMN

CSS3+JS实现静态圆形进度条【清晰、易懂】

bergwhite / 1852人阅读

摘要:一实现原理首先,我们来一个圆黑色。我们希望的是,继续旋转被黑色遮住。。。二来,万一项目中不需要使用呢,以后还得实现。

在写这篇文章之前,笔者查看了多篇博客,无奈前辈大多只是贴了代码,没有清晰明了的注释,所以容易让新人看得云里雾里。这里,笔者在弄明白原理后,对代码进行了优化,决定写(总结)一篇清晰、明了的圆形进度条的实现,以便后人能快速搞懂。

一、实现原理

首先,我们来一个(黑色)。
接着,再来两个半圆,将黑色的圆遮住。(为了演示,左右两侧颜色不一样)
这时候,我们顺时针旋转右侧蓝色的半圆,下面的黑色圆就会暴露出来,比如我们旋转45度(12.5%),效果出来了。
如果我们将蓝色的右半圆同样设置成灰色,看效果,一个12.5%的饼图就出来了!

OK,我们再旋转更大的度数试试,比如40%(144度),50%(180度),60%(216度)如下图。
我们发现,旋转180度之后右半圆与左半圆重合了,如果再旋转,就会在右上角冒出来,显然不是我们想要的。

我们希望的是,继续旋转被黑色遮住。。。嗯。。。怎么做呢?

我们将右侧的圆回归原位,把它刷成黑色(和底色一样),然后旋转左边的半圆(它在右侧半圆的更底层),这样,它就会被右侧半圆遮住了。好的,废话不多说,我们将左侧的半圆顺时针旋转45度,效果出来了。可以想象,继续旋转,180度的时候,就完全被右侧半圆遮住,而左侧底色全部暴露,这样100%显示出来了。


最后,加上一个白色的小圆,放在正中间就行了。

好的,到这里,我们已经明白如何实现的了。

二、代码实现

html部分

60%

css部分

    /*支持IE9及以上*/
    .circle-bar { font-size:200px; width: 1em; height: 1em; position: relative;  background-color: #333; }
    .circle-bar-left,.circle-bar-right { width: 1em; height: 1em; background-color: #eee; }
    /*
        这里采用clip剪切了圆,实现左右两个半圆,右半圆在后面,因此在更上一层,
        clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
     */
    .circle-bar-right { clip:rect(0,auto,auto,.5em); }
    .circle-bar-left { clip:rect(0,.5em,auto,0); }
    
    .mask { width: 0.8em; height: 0.8em;  background-color: #fff;text-align: center;line-height: 0.2em; color:rgba(0,0,0,0.5); }
    .mask :first-child { font-size: 0.3em; height: 0.8em; line-height: 0.8em; display: block;  }
    /*所有的后代都水平垂直居中,这样就是同心圆了*/
    .circle-bar * {  position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
    /*自身以及子元素都是圆*/
    .circle-bar, .circle-bar > * { border-radius: 50%; }
    

JavaScript实现

    //反正CSS3中的border-radius属性IE8是不支持了,所以这里就用新方法吧getElementsByClassName()走起
    window.onload = function(){

        var circleBar    = document.getElementsByClassName("circle-bar")[0];
        var percent      = parseInt(circleBar.getElementsByClassName("percent")[0].firstChild.nodeValue);
        var color        = circleBar.css("background-color");
        var left_circle  = circleBar.getElementsByClassName("circle-bar-left")[0];
        var right_circle = circleBar.getElementsByClassName("circle-bar-right")[0];

        if( percent <= 50 ) {
            var rotate = "rotate("+(percent*3.6)+"deg)";
            right_circle.css3("transform",rotate);
        }else {
            var rotate = "rotate("+((percent-50)*3.6)+"deg)";
            right_circle.css ("background-color",color);//背景色设置为进度条的颜色
            right_circle.css3("transform","rotate(0deg)");//右侧不旋转
            left_circle.css3 ("transform",rotate);//左侧旋转
        }
    }

    //封装了css3函数,主要是懒得重复书写代码,既然写了css3函数,顺便写个css吧,统一样式,好看一些
    Element.prototype.css = function(property,value){
        
        if ( value ) {
            //CSS中像background-color这样的属性,‘-’在JavaScript中不兼容,需要设置成驼峰格式
            var index = property.indexOf("-");
            if( index != -1 ) {
                var char = property.charAt(index+1).toUpperCase();
                property.replace(/(-*){1}/,char);
            }
            this.style[property] = value;
        }else{
            //getPropertyValue()方法参数类似background-color写法,所以不要转驼峰格式
            return window.getComputedStyle(this).getPropertyValue(property);
        }
    }

    //封装一个css3函数,用来快速设置css3属性
    Element.prototype.css3 = function(property,value){
        if( value ){
            property = capitalize(property.toLowerCase());
            this.style["webkit"+property] = value;
            this.style["Moz"+property] = value;
            this.style["ms"+property] = value;
            this.style["O"+property] = value;
            this.style[property.toLowerCase()] = value;
        }else{
            return window.getComputedStyle(this).getPropertyValue(
                    ("webkit"+property)||("Moz"+property)||("ms"+property)||("O"+property)||property);
                    //老实说,我不知道为什么要把不带浏览器标记的放在最后,既然都这么用,我也这么做吧。不过这样对现代浏览器来说可能并不好,判断次数变多了
        }
        
        //首字母大写
        function capitalize(word){
            return word.charAt(0).toUpperCase() + word.slice(1);
        }
    }

jQuery实现

    $(function(){

        var percent = parseInt($(".mask :first-child").text());
        var baseColor = $(".circle-bar").css("background-color");

        if( percent<=50 ){
            $(".circle-bar-right").css("transform","rotate("+(percent*3.6)+"deg)");
        }else {
            $(".circle-bar-right").css({
                "transform":"rotate(0deg)",
                "background-color":baseColor
            });
            $(".circle-bar-left").css("transform","rotate("+((percent-50)*3.6)+"deg)");
        }
    })

jQuery这么简单好用,为什么还要写JavaScript?

一来,学习JavaScript的使用,毕竟有些方法可能是不太熟悉的,多查查文档,混个眼熟。
二来,万一项目中不需要使用jQuery呢,以后还得实现。

三、总结体会

在规定圆的大小的时候,使用了font-size属性,而长度大小则基于font-size,也就是em为单位,这样有一个好处,只要修改font-size的值,就可以改变圆的大小了,非常方便。

另外,写css的时候,尽可能将相同功能的代码提取出来,将某个功能写在一个{}中,起一个好名字,以后方便复用,bootstrap就是这么玩的,简洁、易读,通过classname基本就能知道标签有哪些特性了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90551.html

相关文章

  • CSS3+JS实现静态圆形进度清晰易懂

    摘要:一实现原理首先,我们来一个圆黑色。我们希望的是,继续旋转被黑色遮住。。。二来,万一项目中不需要使用呢,以后还得实现。 在写这篇文章之前,笔者查看了多篇博客,无奈前辈大多只是贴了代码,没有清晰明了的注释,所以容易让新人看得云里雾里。这里,笔者在弄明白原理后,对代码进行了优化,决定写(总结)一篇清晰、明了的圆形进度条的实现,以便后人能快速搞懂。 一、实现原理 首先,我们来一个圆(黑色)。接...

    developerworks 评论0 收藏0
  • css3实现圆形进度

    摘要:在开发微信小程序的时候,遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景,在上面有和两个长方形,用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。 在开发微信小程序的时候,遇到圆形进度条的需求。使用canvas绘图比较麻烦: 1、为了实现在不同屏幕上面的适配,必须动态的计算进度条的大小; 2、在小程序...

    leanote 评论0 收藏0
  • css3实现圆形进度

    摘要:在开发微信小程序的时候,遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景,在上面有和两个长方形,用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。 在开发微信小程序的时候,遇到圆形进度条的需求。使用canvas绘图比较麻烦: 1、为了实现在不同屏幕上面的适配,必须动态的计算进度条的大小; 2、在小程序...

    enali 评论0 收藏0
  • vue 圆形进度组件解析

    摘要:项目简介本组件是下的圆形进度条动画组件自由可定制,几乎全部参数均可设置源码简单清晰面向人群急于使用圆形进度条动画组件的同学。由于动画关键帧的定义需要根据外部传入的参数决定,不能预先写死。所以通过生成节点的方式插入关键帧。 项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰showImg(https://segmentfault.com/im...

    Cheng_Gang 评论0 收藏0
  • 实现环形进度CSS3+jQuery/Vue)

    摘要:整体思路是通过裁切产生两个半圆展示出静态的进度条,而后通过旋转角度的变化产生动态效果。而蓝色部分元素的颜色,是我们还未到达的进度。演示勤快的我去里写了一下这个是的实现这个是的实现环形进度条。参考文章利用和实现环形进度条 整体思路是:通过裁切(clip)产生两个半圆展示出静态的进度条,而后通过旋转(rotate)角度的变化产生动态效果。 先来回顾两个基础知识点 (1)css的一个不常见的...

    BWrong 评论0 收藏0

发表评论

0条评论

bergwhite

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<