利用js、jQuery和css实现环形进度条组件封装

最新推荐文章于 2024-05-07 15:08:09 发布
最新推荐文章于 2024-05-07 15:08:09 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 实习日记 前端开发 文章标签： javascript html css jquery 脚本

效果图：


html：

<html> 
<head> 
<title>进度条</title> 
<link rel="stylesheet" type="text/css" href="./myScript.css">
<script type="text/javascript" src="./jquery.js"></script>

<script type="text/javascript" src="./Chart.js"></script>
<body> 
<p>设置百分比: <input type="text" id="tex1" value=""></p>
<p>设置颜色: <input type="text" id="col1" value=""></p>
<p>设置文本: <input type="text" id="tex2" value=""></p>
<script type="text/javascript" src="./myScript.js"></script>
</body>
</html>




js：
<pre name="code" class="javascript">function ProcessBar() {

	this.Container = $("<div>");
	this.Container.addClass("Container");

	this.circle = $("<div>");
	this.circle.addClass("circle");

	this.pie_left = $("<div>");
	this.pie_left.addClass("pie_left");

	this.left = $("<div>");
	this.left.addClass("left");

	this.pie_right = $("<div>");
	this.pie_right.addClass("pie_right");

	this.right = $("<div>");
	this.right.addClass("right");

	this.mask = $("<div>");
	this.mask.addClass("mask");
	this.mask2 = $("<div>");
	this.mask2.addClass("mask2");

	this.Container.append(this.circle);
	this.circle.append(this.pie_left);
	this.pie_left.append(this.left);
	this.circle.append(this.pie_right);
	this.pie_right.append(this.right);
	this.circle.append(this.mask);
	this.circle.append(this.mask2);
	this.mask2.append("总1000GB");

}

/*----------------设置百分比进度-----------------------*/
ProcessBar.prototype.setProgress = function(num) {
	num = num * 3.6;
	if (num <= 180) {
		this.mask.text(num / 3.6 + "%");
		this.left.css('transform', "rotate(0deg)");
		this.right.css('transform', "rotate(" + num + "deg)");
	} else {
		this.mask.text(num / 3.6 + "%");
		this.right.css('transform', "rotate(180deg)");
		this.left.css('transform', "rotate(" + (num - 180) + "deg)");
	}
	
}


ProcessBar.prototype.setColor = function(color) {
	
	this.circle.css('background',color);	
}


var processBar = new ProcessBar();

$(document.body).append(processBar.Container);

/*-----------------------------接口-----------------------------*/
//processBar.setProgress(num);//改变百分比
//processBar.setColor(color);//改变颜色
//processBar.mask2.text(text);//改变文本

/*--------------------------------------------------------------*/

window.setInterval(function() {
	var num = $("#tex1").val();
	var color = $("#col1").val();
	var text = $("#tex2").val();
	//设置进度
	if (num > 0 && num <= 100) {
		processBar.setProgress(num);
	} else {
		processBar.setProgress(0);
	}	
	
	processBar.setColor(color);
	
	
	
	
}, 20);





css：


.Container{
	top:50px;
	left:500px;
	width: 120px;
	height: 120px;
	position: absolute;
	border-radius: 50%;
	
}


.circle {
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50%;
	background: #808080;
}

.pie_left,.pie_right {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.left,.right {
	display: block;
	width: 100%;
	height: 100%;
	background: #c0c0c0;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	
}

.pie_right,.right {
	clip: rect(0, auto, auto, 60px);
}

.pie_left,.left {
	clip: rect(0, 60px, auto, 0);
}

.mask {
	width: 86%;
	height: 86%;
	border-radius: 50%;
	left: 7%;
	top: 7%;
	background: #FFF;
	position: absolute;
	text-align: center;
	line-height: 80px;
	font-size: 35px;
}

.mask2 {
	width: 86%;
	height: 86%;
	border-radius: 50%;
	left: 7%;
	top: 7%;
	position: absolute;
	text-align: center;
	line-height: 130px;
	font-size: 16px;
}




 

 

 


                

        

        

    




    

      

        

            

              
                
                  稀薄里夹杂
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jquery css实现流程进度条

				
			

			

				

					11-21
				

			

		

		

			
				
本文实例为大家分享了jquery css实现流程进度条的具体代码，供大家参考，具体内容如下 方案1：  方案2：   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>流程进度条&lt...

			
		

	



                

              
                



	

		

			

				
					
Jquery+css实现环形进度

				
			

			

				

					05-21
				

			

		

		

			
				
本项目是利用JavaScript的jQuery库和CSS样式来实现环形进度条的动态效果。下面我们将详细探讨如何通过jQuery和CSS实现环形进度条及其相关知识点。  首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件...

			
		

	



                


  
              

                


	

		

			

				
					
CSS3绘制环形进度条

				
			

			

				

					weixin_30478923的博客
				

				

					09-22
					
					92
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        .box{w...

			
		

	





	

		

			

				
					
uni-app canvas实现环形刻度进度条

				
			

			

				

					ym深的博客
				

				

					01-02
					
					6645
					
				

			

		

		

			
				
因为项目中需要使用到一个环形刻度进度条，所以就需要实现这个需求，在uni-app插件市场找了一圈，也没有找到这种插件，只找到了一个环形进度条，所以就在该插件上修改，实现了一个环形刻度进度条

参考
uni-app插件市场：弧形进度条
微信小程序canvas画原型带刻度进度条
效果图

代码
<template>
	<view class="progress_box">
		<canvas class="progress_bg" canvas-id="cpbg"><.

			
		

	



		

			
		



	

		

			

				
					
原生 js 画环形进度条

				
			

			

				

					工作中遇到问题记录
				

				

					05-07
					
					522
					
				

			

		

		

			
				
原生 js 画环形进度条

			
		

	





	

		

			

				
					
js 绘制圆环进度条

				
			

			

				

					逆风优雅的博客
				

				

					04-19
					
					1677
					
				

			

		

		

			
				
<template>
      <!-- <canvas id="canvas" width="300" height="300">您的浏览器不支持 HTML5 canvas 标签。</canvas> -->
       <canvas class="canvas" width="100" height="100"></canvas>
</template>

<script>
export default.

			
		

	





	

		

			

				
					
原生js实现圆环进度条

				
			

			

				

					suuntil的博客
				

				

					07-04
					
					632
					
				

			

		

		

			
				
【代码】原生js实现圆环进度条。

			
		

	





	

		

			

				
					
JavaScript-bootstrap-JQuery-圆形进度条-设置进度条值

				
			

			

				

					插件开发
				

				

					06-20
					
					754
					
				

			

		

		

			
				
通过设置进度条进度值，可以在界面简单绘制一个进度条。

			
		

	





	

		

			

				
					
pbar:基于jquery和css3的进度条插件

				
			

			

				

					05-16
				

			

		

		

			
				
`pbar` 是一个利用 jQuery 库和 CSS3 技术实现的高效、美观的进度条插件。它允许开发者轻松地为网页添加动态、交互式的进度指示器，提升用户体验。  **jQuery 插件机制**  jQuery 是一款广泛使用的JavaScript库，...

			
		

	





	

		

			

				
					
基于JavaScript和CSS的jQuery前端UI组件库设计源码

					
最新发布

				
			

			

				

					05-30
				

			

		

		

			
				
本项目是基于JavaScript和CSS的jQuery前端UI组件库设计源码，包含39个文件，主要文件类型为js、css、svg、png、gif、eot、ttf、woff和LICENSE。该项目适用于jQuery前端UI组件库的开发和设计，为用户提供了一个丰富的...

			
		

	





	

		

			

				
					
用 CSS background 实现刻度线的呈现

				
			

			

				

					09-22
				

			

		

		

			
				
主要介绍了用 CSS background 实现刻度线的呈现,需要的朋友可以参考下

			
		

	





	

		

			

				
					
基于html5的纯js+css实现环形进度条

				
			

			

				

					12-27
				

			

		

		

			
				
使用html5的canvas插件，配合css3就可以在页面上画出漂亮的环形进度条。

			
		

	





	

		

			

				
					
近20款样式的HTML5环形进度条插件

				
			

			

				

					11-07
				

			

		

		

			
				
近20款样式的HTML5环形进度条插件 近20款样式的HTML5环形进度条插件

			
		

	





	

		

			

				
					
圆形进度百分比js

				
			

			

				

					06-30
				

			

		

		

			
				
js圆形进度百分比展示，进度条展示，运行进度

			
		

	





	

		

			

				
					
CSS步骤条，进度条

				
			

			

				

					04-27
				

			

		

		

			
				
CSS步骤条，进度条，纯css，挺舒服的，可惜不能传图片

			
		

	





	

		

			

				
					
css+js 实现圆圈进度条

				
			

			

				

					weixin_45921734的博客
				

				

					06-26
					
					1258
					
				

			

		

		

			
				
使用css+js实现圆圈进度条

			
		

	





	

		

			

				
					
jQuery/js 实现环形进度条

				
			

			

				

					qq_44481903的博客
				

				

					03-08
					
					1305
					
				

			

		

		

			
				
效果图

整体思路是：通过裁切（clip）产生两个半圆展示出静态的进度条，而后通过旋转（rotate）角度的变化产生动态效果
clip：只能在元素设置了“position:absolute”或者“position:fixed”属性时起作用 ；

结构
<div id="circle_1" class="circle">
    <div class="pie_left">
        <div class="left"></div>
    </di

			
		

	





	

		

			

				
					
jquery进度条组件

				
			

			

				

					
				

				

					07-06
					
					128
					
				

			

		

		

			
				
依赖jquery，主要用到animate函数，问题是animate执行动画和进度条文本值变化不一致！ 
//进度条
//add creat4kProgressBar Function to jQuery prototype
$.fn.creat4kProgressBar = function...

			
		

	





	

		

			

				
					
使用css3实现环形进度条

					
热门推荐

				
			

			

				

					ClassicSong的博客
				

				

					06-01
					
					4万+
					
				

			

		

		

			
				
进度条效果如下： 


整圆的效果处理会简单些，不完整环实现起来细节多点。下边是实现逻辑和过程。

进度条组成：

环形：两种颜色进度条，当余量少于50%时进度条颜色由绿色变为黄色。进度条结构由两个叠加环形组成；上叠加环形展示剩余量，深色；下叠加环形展示100%总量，浅色。

样式实现：

1：画一个方形，如图中阴影部分所示： 
 
2：方形中画两个等大均分方形的矩形，(注意每个矩形一定要设置：o...

			
		

	





	

		

			

				
					
jquery组件封装

				
			

			

				

					07-27
				

			

		

		

			
				
在jQuery中，我们可以使用$.extend()方法来扩展已经存在的组件，也可以自定义自己的组件。首先，我们需要定义一个新的函数，比如MyJsControl，然后使用$.extend()方法将它扩展到jQuery对象上。例如，我们可以这样...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值