jquery 圆形进度条

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家,也给大家做个参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圆形进度条</title>
<link rel="icon" href="images/50.gif" type="image/gif" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.circliful.js"></script>
<style>
	body{ margin:0; padding:0; font-size:14px; line-height:24px; color:#8b8b8b; font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;}
	.you{ margin-left:36px; float:left; height:auto; width:55%; min-width:500px}
	.yous{ box-shadow:0px 0px 5px  #ddd; background:#FFF;}
	.youz{ background:url(./images/tbg.png) repeat-x; height:39px; line-height:39px; font-size:14px; color:#323436; text-indent:20px}
	.rrlh{ height:180px; margin-top:20px}
	.txz{ position: absolute; left: 50%; top: 50%; margin-left: -30px; margin-top: -30px; line-height: 30px;}
	.cpu{ width:50%; height:170px; float:left; text-align:center; position:relative}
</style>
</head>
<div class="you">
	<div class="yous">		 
		<div class="youz">运行状态</div>		 
		<div class="rrlh">
			<!-- cpu使用率 -->
			<div class="cpu">
				<div class="txz"><span style="font-size: 40px;" id="cpuText">0</span><br /> CPU使用率</div>
				<div id="myStat2" style="display: inline-block" data-width="10" data-fontsize="28" ></div>								
			</div>
			<!-- 内存使用率 -->
			<div class="cpu">
				<div class="txz"><span style="font-size: 40px;" id="ncText">0</span><br /> 内存使用率</div>
				<div id="myStat3" style="display: inline-block" data-width="10" data-fontsize="28" ></div>								
			</div>
		</div>
	</div>		 
</div>
</html>
(function( $ ) {
    $.fn.circliful = function(options) {
        var settings = $.extend({
            // These are the defaults.
            foregroundColor: "#556b2f",            backgroundColor: "#eee",            fillColor: false,            width: 15,            dimension: 200,            size: 15, 
			percent: 50,endPercent: 100,showValue: "showValue", //新增 动态数值变化值显示标签ID
            animationStep: 1.0
        }, options );
         return this.each(function() {
                var dimension = '';
                var text = '';
				var info = '';
                var width = '';
                var size = 0;
				var percent = 0;
				var endPercent = 100;
				var fgcolor = '';
				var bgcolor = '';
				var icon = '';
                var animationstep = 0.0;
				var showValue = '';
                $(this).addClass('circliful');
				
				showValue = settings.showValue; //赋值
				
                if($(this).data('dimension') != undefined) {
                    dimension = $(this).data('dimension');
                } else {
                    dimension = settings.dimension;
                }
    
                if($(this).data('width') != undefined) {
                    width = $(this).data('width');
                } else {
                    width = settings.width;
                }
    
                if($(this).data('fontsize') != undefined) {
                    size = $(this).data('fontsize');
                } else {
                    size = settings.size;
                }
				
				if($(this).data('percent') != undefined) {
                    percent = $(this).data('percent') / 100;
					endPercent = $(this).data('percent');
                } else {
                    percent = settings.percent / 100;
					endPercent = settings.endPercent;
                }
				
				if($(this).data('fgcolor') != undefined) {
                    fgcolor = $(this).data('fgcolor');
                } else {
                    fgcolor = settings.foregroundColor;
                }
				
				if($(this).data('bgcolor') != undefined) {
                    bgcolor = $(this).data('bgcolor');
                } else {
                    bgcolor = settings.backgroundColor;
                }
				
                if($(this).data('animation-step') != undefined) {
                    animationstep = parseFloat($(this).data('animation-step'));
                } else {
                    animationstep = settings.animationStep;
                }
                if($(this).data('text') != undefined) {
                    text = $(this).data('text');
					
					if($(this).data('icon') != undefined) {
						icon = '<i class="fa ' + $(this).data('icon') + '"></i>';
					}
					
					 if($(this).data('type') != undefined) {
						type = $(this).data('type');
					
						if(type == 'half') {
							$(this).append('<span class="circle-text-half">' +  icon  + text + '</span>');
							$(this).find('.circle-text-half').css({'line-height': (dimension / 1.45) + 'px', 'font-size' : size + 'px' });
						} else {
							$(this).append('<span class="circle-text">' + icon + text + '</span>');
							//设置文字样式
							$(this).find('.circle-text').css(
								{'line-height': dimension + 'px', 'font-size' : size + 'px'}
							);
						}
					} else {
						$(this).append('<span class="circle-text">' + icon + text + '</span>');
						$(this).find('.circle-text').css(
							{'line-height': dimension + 'px', 'font-size' : size + 'px' }
						);
					}
                } else if($(this).data('icon') != undefined) {
				
				}
				
				if($(this).data('info') != undefined) {
                    info = $(this).data('info');
					
					if($(this).data('type') != undefined) {
						type = $(this).data('type');
					
						if(type == 'half') { 
							$(this).append('<span class="circle-info-half">' + info + '</span>');
							$(this).find('.circle-info-half').css({'line-height': (dimension * 0.9) + 'px', });
						} else {
							$(this).append('<span class="circle-info">' + info + '</span>');
							$(this).find('.circle-info').css({'line-height': (dimension * 1.25) + 'px', });
						}
					} else {
						$(this).append('<span class="circle-info">' + info + '</span>');
						$(this).find('.circle-info').css({'line-height': (dimension * 1.25) + 'px', });
					}
                }
    
                $(this).width(dimension + 'px');
				
              var canvas = $('<canvas></canvas>').attr({ width: dimension, height: dimension }).appendTo($(this)).get(0);
              var context = canvas.getContext('2d');
              var x = canvas.width / 2;
              var y = canvas.height / 2;
			  var degrees = percent * 360.0;
			  var radians = degrees * (Math.PI / 180);
              var radius = canvas.width / 2.5;
              var startAngle = 2.3 * Math.PI;
              var endAngle = 0;
              var counterClockwise = false;
              var curPerc = animationstep === 0.0 ? endPercent : 0.0;
              var curStep = Math.max(animationstep, 0.0);
			  var circ = Math.PI * 2;
			  var quart = Math.PI / 2;
			  var type = '';
			  var fill = false;
			  
			  if($(this).data('type') != undefined) {
                    type = $(this).data('type');
					
					if(type == 'half') {
						var startAngle = 2.0 * Math.PI;
						var endAngle = 3.13;
						var circ = Math.PI * 1.0;
						var quart = Math.PI / 0.996;
					}
                }
				
				if($(this).data('fill') != undefined) {
					fill = $(this).data('fill');
				} else {
					fill = settings.fillColor;
				}
			  //animate foreground circle
			  function animate(current) {
				/**
				 * [修改] 设置圆心动态数据变化值
				 * showValue 为显示动态值的html标签的ID
				 * 这里 parseInt(current*100) 取整数,他的最大值为 endPercent的值
				 **/
				$("#"+showValue).html(parseInt(current*100));
				/**
				 * [修改] 判断值是否超过圆形的一半,并修改圆形颜色				 *
				 **/
				if(current < 0.5){
					fgcolor = '#14b997';
				}else{
					fgcolor = '#f75656';
				}
				
				context.clearRect(0, 0, canvas.width, canvas.height);				 
				context.beginPath();
				context.arc(x, y, radius, endAngle, startAngle, false);
				context.lineWidth = width - 1;		
				// line color
				context.strokeStyle = bgcolor;
				context.stroke();
				if(fill) {
					context.fillStyle = fill;
					context.fill();
				}
				context.beginPath();
				context.arc(x, -(quart), ((circ) * current) - quart, false);
				context.lineWidth = width;
				// line color
				context.strokeStyle = fgcolor;
				context.stroke();

				if (curPerc < endPercent) {
  				     curPerc += curStep;
					 requestAnimationFrame(function () {
						/**
						 * [修改] 降低圆形进度条速度
						 **/
						setTimeout(function(){
							animate(Math.min(curPerc, endPercent) / 100);
						}, 40);
					 });
				}
			 }
			 animate(curPerc / 100);
        });
    };
}( jQuery ));
$(document).ready(function(){
		var cupCount = 10,ncCount = 80;
		var myStat2Color = cupCount > 50 ? '#f75656' : '#14b997';
		var myStat3Color = ncCount > 50 ? '#f75656' : '#14b997';				
		$('#myStat2').circliful({
			dimension: 170,endPercent: cupCount,showValue: "cpuText",foregroundColor: myStat2Color,//556b2f
			backgroundColor: "#eee",});
		$('#myStat3').circliful({
			dimension: 170,endPercent: ncCount,showValue: "ncText",foregroundColor: myStat3Color,backgroundColor: "#eee",});
	});

以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


1.第一步 设置响应头 header(&#39;Access-Control-Allow-Origin:*&#39;); //支持全域名访问,不安全,部署后需要固定限制为客户端网址 header(&#39;Access-Control-Allow-Methods:POST,GET,OPTIONS,D
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1; $.inArray(value,array) --value是要查找的值,array是被查找的数组。 有如下实例: &lt;!DOCTYPE html&gt; &l
jquery.serializejson.min.js的妙用 关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件。 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提
JS 将form表单数据快速转化为object对象(json对象) jaymou 于 2020-03-03 11:11:05 发布 3534 收藏 3 分类专栏: 前端 文章标签: javascript jquery 版权 前端 专栏收录该内容 5 篇文章0 订阅 订阅专栏 直接上代码 /** *
jQuery的区别:$().click()和$(document).on(&#39;click&#39;,&#39;要选择的元素&#39;,function(){})的不同 文章地址:https://www.cnblogs.com/sqh17/p/7746418.html 解决:动态创建的元素的事件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http://www.helloweba.com/view-blog-282.html 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单。我们使用jquery.spinner.js插件实
layui标签或一般标签均可&lt;div class=&quot;layui-form-item&quot;&gt; &lt;label class=&quot;layui-form-label&quot;&gt;异地仓名称&lt;/label&gt; &lt;div class=&quot;la
网上对于select option 动态添加修改如下, $(&quot;#selectId&quot;).append(&quot;&lt;option value=&#39;&quot;+value+&quot;&#39;&gt;&quot;+text+&quot;&lt;/option&gt;&
jQuery中的 $.extend() 和 $.fn.extend() ANGWH 于 2020-05-24 06:39:59 发布 注意:$.extend是为jQuery类添加添加类方法,用$.调用(类似$.ajax),$.fn.extend则是为jQuery对象添加方法(实例方法),用DOM元素
jquery 循环数组输出显示在html页面 jquery 没有双向数据绑定,但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上,这时我们可以用字符串拼接,元素添加的方法去实现 js部分如下: 复制代码 $(function(){ var a=[&quot;1aa&quot;,&q
javascript事件委托理解,jQuery .on()方法一步到位实现事件委托 Javascript-概念原理 专栏收录该内容 10 篇文章0 订阅 订阅专栏 本篇文章借鉴自:博客园文章,只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托?他还有一个名字叫做事件代理,(时间代理 事件委托,
JQuery-$.when().done().fail()的使用 原文引用于&#160;Echoo华地于&#160;2022-01-06 14:07:10 发布 jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的,就是从jQuery 1
jQuery tableExport导出 excel 上篇写的是jQuery&#160;导出word,就试试导出excel。看见网上写的很乱,我这就把我写的整理下来,有部分来自网上capy 1. js文件的引用 &lt;script type=&quot;text/javascript&quot;
jQuery的遍历-prev()和next()方法 &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;a href=&#39;#&#39; class=&quot;a&quot;&gt; &lt;input type=&quot;tex
attr()和addClass()的区别 方法 addClass() attr()用途&#x9;追加样式&#x9;设置样式对同一个网页元素操作&#x9;&lt;p&gt;test&lt;/p&gt;第1次使用方法&#x9;$(&quot;p&quot;).addClass(&quot;high&quot;);&#x9;$(&quot;p&
前端——函数(匿名函数、自执行函数) FreshLemon_ 于 2019-06-11 17:11:49 发布 函数声明:function box(){} 函数表达式:var box = function(){}; 匿名函数:function(){} (属于函数表达式) 1声明了一个函数: var
js: 获取标签元素data-*属性值的方法 彭世瑜 于 2022-05-23 09:59:50 发布 2165 收藏 1 文章标签: javascript 前端 jquery 版权 标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 &lt;style&gt;
JavaScript函数详解:匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制 1.具名函数 定义: 调用: 方式1:方法名(); 可以多次调用 方式2:在事件中调用,直接写函数名,不需用括号 2.匿名函数 没有名字的函数 匿名函数在使用时只有两种情况: 1.匿名函数自执行:声明后不需要
如何等待ajax完成再执行相应操作 ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用。 例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作。 // 声明一个表示状态的全局变量 status var statu
一步一步教你写一个jQuery的插件教程(Plugin) 更新时间:2009年09月03日 02:10:54 作者: 我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。 jQuery 的plugin开发需要注意的事情, 1. 明确jQuery