环形进度条（从0到100%）效果
最近公司项⽬中要⽤到这种类似环形进度条的效果，初始就从0开始动画到100%结束。动画结果始终会停留在100%上，并不会到因为数据的关系停留在⼀半。
如图java开发培训班
代码如下
demo.html
1<!doctype html>
2<html lang="zh">
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<title>demo</title>
8<style>
9 .rad-prg{
10 position: relative;
11 }
12 .rad-con{
13 position: absolute;
14 z-index: 1;
15 top:0;
16 left: 0;
17 text-align: center;
18 width:90px;
19 height: 90px;
20 padding: 10px;
21 font-family: "microsoft yahei";
22 }
23</style>
24</head>
25<body>
26<div class="prg-cont rad-prg" id="indicatorContainer">
27<div class="rad-con">
28<p>￥4999</p>
29<p>账户总览</p>
30</div>
31</div>
32<script type="text/javascript" src="js/jquery.min.js"></script>
33<script src="js/radialIndicator.js"></script>
34<script>
35
36 $('#indicatorContainer').radialIndicator({
37 barColor: '#007aff',
38 barWidth: 5,
39 initValue: 0,
40 roundCorner : true,
41 percentage: true,
42 displayNumber: false,
43 radius: 50
44 });
45
46 setTimeout(function(){
47var radObj = $('#indicatorContainer2').data('radialIndicator');
48 radObj.animate(100);
49 },300);
50
51</script>
52</body>
53</html>
radialIndicator.js 这是jquery的插件
1/*
2 radialIndicator.js v 1.0.0
3 Author: Sudhanshu Yadav
4 Copyright (c) 201
5 Sudhanshu Yadav - ignitersworld , released under the MIT license.
5 Demo on: ignitersworld/lab/radialIndicator.html
6*/
7
8 ;(function ($, window, document) {
9 "use strict";
10//circumfence and quart value to start bar from top
11var circ = Math.PI * 2,
12 quart = Math.PI / 2;
13
14//function to convert hex to rgb
15
16function hexToRgb(hex) {
17// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
18var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
19 hex = place(shorthandRegex, function (m, r, g, b) {
20return r + r + g + g + b + b;
21 });
22
23var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
24return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
25 }
26
27function getPropVal(curShift, perShift, bottomRange, topRange) {
und(bottomRange + ((topRange - bottomRange) * curShift / perShift));
29 }
30
31
32//function to get current color in case of
33function getCurrentColor(curPer, bottomVal, topVal, bottomColor, topColor) {
34var rgbAryTop = topColor.indexOf('#') != -1 ? hexToRgb(topColor) : topColor.match(/\d+/g),
35 rgbAryBottom = bottomColor.indexOf('#') != -1 ? hexToRgb(bottomColor) : bottomColor.match(/\d+/g),
36 perShift = topVal - bottomVal,
37 curShift = curPer - bottomVal;
java写出快速排序算法38
39if (!rgbAryTop || !rgbAryBottom) return null;
40
jquery下载文件进度条41return 'rgb(' + getPropVal(curShift, perShift, rgbAryBottom[0], rgbAryTop[0]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[1], rgbAryTop[1]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[2], rgbAryTop[2]) + ')';
42 }
43
44//to merge object
45function merge() {
46var arg = arguments,
47 target = arg[0];
最详细的易语言教程48for (var i = 1, ln = arg.length; i < ln; i++) {
49var obj = arg[i];
50for (var k in obj) {
51if (obj.hasOwnProperty(k)) {
52 target[k] = obj[k];
53 }
54 }
55 }
56return target;
57 }
58
59//function to apply formatting on number depending on parameter
60function formatter(pattern) {
61return function (num) {
62if(!pattern) String();
63 num = num || 0
64var numRev = String().split('').reverse(),
65 output = pattern.split("").reverse(),
66 i = 0,
67 lastHashReplaced = 0;
68
69//changes hash with numbers
70for (var ln = output.length; i < ln; i++) {
71if (!numRev.length) break;
72if (output[i] == "#") {
73 lastHashReplaced = i;
74 output[i] = numRev.shift();
75 }
76 }
77
78//add overflowing numbers before prefix
79 output.splice(lastHashReplaced+1, output.lastIndexOf('#') - lastHashReplaced, verse().join("")); 80
verse().join('');
82 }
83 }
84
85
86//circle bar class
87function Indicator(container, indOption) {
88 indOption = indOption || {};
89 indOption = merge({}, radialIndicator.defaults, indOption);
90
91this.indOption = indOption;
92
93//create a queryselector if a selector string is passed in container
94if (typeof container == "string")
95 container = document.querySelector(container);
96
97//get the first element if container is a node list
98if (container.length)
99 container = container[0];
100
102
103//create a canvas element
104var canElm = ateElement("canvas");
105 container.appendChild(canElm);
106
107this.canElm = canElm; // dom object where drawing will happen
108
< = Context('2d'); //get 2d canvas context
110
111//add intial value
112this.current_value = indOption.initValue || indOption.minValue || 0;
113
114 }
115
116
117 Indicator.prototype = {
118 constructor: radialIndicator,
119 init: function () {
120var indOption = this.indOption,
121 canElm = this.canElm,
122 ctx = ,
123 dim = (indOption.radius + indOption.barWidth) * 2, //elm width and height
124 center = dim / 2; //center point in both x and y axis
125
126
127//create a formatter function
128this.formatter = typeof indOption.format == "function" ? indOption.format : formatter(indOption.format); 129
130//maximum text length;
131this.maxLength = indOption.percentage ? 4 : this.formatter(indOption.maxValue).length;
132
133 canElm.width = dim;
134 canElm.height = dim;
135
136//draw a grey circle
136//draw a grey circle
137 ctx.strokeStyle = indOption.barBgColor; //background circle color
138 ctx.lineWidth = indOption.barWidth;
139 ctx.beginPath();
140 ctx.arc(center, center, indOption.radius, 0, 2 * Math.PI);
141 ctx.stroke();
142
143//store the image data after grey circle draw
144this.imgData = ImageData(0, 0, dim, dim);
145
146//put the initial value if defined
147this.value(this.current_value);
148
149return this;
150 },
151//update the value of indicator without animation
152 value: function (val) {
tcga数据库的使用教程153//return the val if val is not provided
154if (val === undefined || isNaN(val)) {
155return this.current_value;switch交换机什么意思
156 }
157
158 val = parseInt(val);
159
160var ctx = ,
161 indOption = this.indOption,
162 curColor = indOption.barColor,
163 dim = (indOption.radius + indOption.barWidth) * 2,
164 minVal = indOption.minValue,
165 maxVal = indOption.maxValue,
166 center = dim / 2;
167
168//limit the val in range of 0 to 100
169 val = val < minVal ? minVal : val > maxVal ? maxVal : val;
170
171var perVal = und(((val - minVal) * 100 / (maxVal - minVal)) * 100) / 100, //percentage value tp two decimal precision
172 dispVal = indOption.percentage ? perVal + '%' : this.formatter(val); //formatted value
173
174//save val on object
175this.current_value = val;
176
177
178//draw the bg circle
179 ctx.putImageData(this.imgData, 0, 0);
180
181//get current color if color range is set
182if (typeof curColor == "object") {
183var range = Object.keys(curColor);
184
185for (var i = 1, ln = range.length; i < ln; i++) {
186var bottomVal = range[i - 1],
187 topVal = range[i],
188 bottomColor = curColor[bottomVal],
189 topColor = curColor[topVal],
190 newColor = val == bottomVal ? bottomColor : val == topVal ? topColor : val > bottomVal && val < topVal ? indOption.interpolate ? getCurrentColor(val, bottomVal, topVal, bottomColor, topColor) : topColor : false;
191
192if (newColor != false) {
193 curColor = newColor;
194break;
195 }
196 }
197 }
198
199//draw th circle value
200 ctx.strokeStyle = curColor;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论