原生JS简单绘制一个圆形进度条

最新推荐文章于 2025-06-15 13:38:14 发布

Arbort_

最新推荐文章于 2025-06-15 13:38:14 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：图表组件使用

本文链接：https://blog.youkuaiyun.com/Arbort_/article/details/83304823

组件使用同时被 2 个专栏收录

9 篇文章

订阅专栏

图表

3 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS创建一个动态的圆形进度条，包括结构布局、样式设置及JavaScript交互实现。通过div元素和边框圆角效果，配合CSS3的transform旋转属性和clip裁剪属性，实现了进度条的动态显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结构:

<div class="box"></div>

样式

/*原形条*/
.wrap,.circle,.num {width: 200px;height: 200px;border-radius: 50%;}
.wrap {	position: relative;	border: 10px solid #ccc;box-sizing: border-box;}
.circle { position: absolute; top: -10px; left: -10px; box-sizing: border-box;}
.circle div {width: 200px; height: 200px;position: absolute;box-sizing: border-box;	border-radius: 50%;}
.num {	position: absolute;	top: -10px;	left: -10px;	line-height: 200px;	text-align: center;	font-size: 50px;}
.left {	clip: rect(0, 100px, 200px, 0);	border: 10px solid #f00;}
.right {clip: rect(0, 200px, 200px, 100px);	border: 10px solid #f00;}

JS代码

 function Yuan(element,num){
            this.box = element;//获取节点
            this.box.className = 'wrap';

            //创建节点circle
            this.circle = document.createElement("div");
            this.circle.className = "circle";
            this.box.appendChild(this.circle);

            //创建circle的子节点left
            this.left = document.createElement("div");
            this.left.className = "left";
            this.circle.appendChild(this.left);

            //创建circle的子节点right
            this.right = document.createElement("div");
            this.right.className = "right";
            this.circle.appendChild(this.right);

            //创建节点num
            this.num = document.createElement("div");
            this.num.className = "num";
            this.box.appendChild(this.num);
            this.num.innerHTML = '<span class="">'+ num +'</span>%';
            this.jz(num);
        }
        Yuan.prototype.jz = function(num){
            var i = 0;
            var that = this;
            var int = setInterval(function(){
                that.gx( num/10*i );
                i++;
                if(i>10){
                    clearInterval(int)
                }
            },0);//这里可以修改绘制进度的时间
        }
        Yuan.prototype.gx  = function(n){
            if(n <= 50) {
                this.right.style.display = 'none';
                this.circle.style.clip = 'rect(0, 200px, 200px, 100px)';
            } else {
                this.right.style.display = 'block';
                this.circle.style.clip = 'rect(auto, auto, auto, auto)';
            }
            this.left.style.transform = 'rotate(' + n * 360 / 100 + 'deg)';

        }
        let box = new Yuan(document.querySelector('.box'),78);

转载自https://blog.youkuaiyun.com/cjp66666666666/article/details/80594664

实现原理链接:点我啦~~