CSS+Javascript实现的一个粗糙的圆形进度条，可以当小插件用

qiminghang

已于 2022-04-07 22:39:25 修改

阅读量715

点赞数

分类专栏： Javascript 前端文章标签： javascript

于 2022-04-07 17:05:23 首次发布

本文链接：https://blog.csdn.net/qiminghang/article/details/124021168

版权

Javascript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <meta charset="utf-8">
        <title>circle progress bar</title>
    </head>
    <body>
        <style type="text/css">
            .circle_container{width: 200px; height: 200px; border: 1px dotted #aaa; margin: 100px auto; position: relative;}
            .cover{position: absolute; top: 0; width: 100px; height: 200px; overflow: hidden ;}
            .left{left:0;}
            .right{right:0;}
            .circleprogress{width:180px; height: 180px; border: 10px solid transparent; border-radius: 50%; position: absolute; top:0; transition: all 1s;}
            .rightcircle{border-top: 10px solid green; border-right: 10px solid green; right: 0; transform: rotate(45deg);}
            .leftcircle{border-left: 10px solid green; border-top: 10px solid green; transform: rotate(45deg);}
            
        </style>
        <div id="progress1" class="circle_container">
            <div class="cover left">
                <div class="circleprogress leftcircle"></div>
            </div>
            <div class="cover right">
                <div class="circleprogress rightcircle"></div>
            </div>
        </div>
        <script type="text/javascript" language="javascript">
            function circleProgressbar(objElement,intNum){
                this._objElement = objElement;
                this._percentage = parseInt(intNum);
                if(isNaN(this._percentage)) this._percentage = 0;
                if(circleProgressbar.prototype._isinitial == undefined){
                    circleProgressbar.prototype._transdeg = 100 / 360;
                    circleProgressbar.prototype.get = function(){
                        return this._percentage;
                    }
                    circleProgressbar.prototype.set = function(intValue){
                        this._percentage = intValue;
                        this._percentage <= 0 ? 0 : this._percentage;
                        this._percentage >= 100 ? 100 : this._percentage;
                        //计算数值对应的角度
                        this._deg = intValue / circleProgressbar.prototype._transdeg;//能算出度数
                        if(this._percentage <= 50){
                            this._deg -= 135;//角度差
                            //左边隐藏
                            this._objElement.firstElementChild.firstElementChild.style.transform = "rotate(135deg)";
                            //旋转右边
                            this._objElement.lastElementChild.firstElementChild.style.transform = "rotate(" + this._deg + "deg)";
                        }else{
                            //旋转右边
                            this._objElement.lastElementChild.firstElementChild.style.transform = "rotate(45deg)";
                            if(this._percentage == 100){
                                this._objElement.firstElementChild.firstElementChild.style.transform = "rotate(" + 315 + "deg)";
                            }else{
                                this._deg -= 45;//角度差
                                this._objElement.firstElementChild.firstElementChild.style.transform = "rotate(" + this._deg + "deg)";
                                
                            }
                            
                        }
                        return this._deg;
                    }
                    this.set(this._percentage);//创建对象的时候，指示默认进度
                    circleProgressbar.prototype._isinitial = true;
                }
            }

            //创建滚动条对象，传入滚动条id和默认进度
            per = 0;
            var pg = new circleProgressbar(document.getElementById("progress1"),per);
            //展示用，每秒加10%
            setInterval(() => {
                pg.set(per);
                per = per+10;
                per = per > 100 ? 0 : per;
            }, 1000);
        </script>
    </body>
</html>

新建文件，复制粘贴就能用，有点糙，后续完善。也是边学边实践吧，有点不伦不类，插件不插件的，真要做成插件要考虑的就要比现在多太多了，原生不原生的，写的时候只想着够我自己用的了。

qiminghang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS+Javascript实现的一个粗糙的圆形进度条，可以当小插件用

<html> <head> <meta charset="utf-8"> <title>circle progress bar</title> </head> <body> <style type="text/css"> .circle_container{width: 200px; height: 200px; b.
复制链接

扫一扫