《JS实现环形进度条(从0到100%)效果_.docx》由会员分享，可在线阅读，更多相关《JS实现环形进度条(从0到100%)效果_.docx（18页珍藏版）》请在三一文库上搜索。
1、JS实现环形进度条(从0到100%)效果_ 这篇文章主要介绍了JS实现环形进度条（从0到100%）效果的相关资料,特别不错，具有参考借鉴价值，需要的伴侣可以参考下 最近公司项目中要用到这种类似环形进度条的效果，初始就从0开头动画到100%结束。动画结果始终会停留在100%上，并不会到由于数据的关系停留在一半。 如图 代码如下: demo.html !doctype html html lang=zh head meta charset=UTF-8 meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 meta name=viewpor
2、t content=width=device-width, initial-scale=1.0 titledemo/title style .rad-prg position: relative; .rad-con position: absolute; z-index: 1; top:0; left: 0; text-align: center; width:90px; height: 90px; padding: 10px; font-family: microsoft yahei; /style /head body div class=prg-cont rad-prg id=indic
3、atorContainer div class=rad-con p￥4999/p p账户总览/p /div /div script type=text/javascript src=js/jquery.min.js/script script src=js/radialIndicator.js/script script $(#indicatorContainer).radialIndicator( barColor: #007aff, barWidth: 5, initValue: 0, roundCorner : true, percentage: true, displayNumber:
4、 false, radius: 50 ); setTimeout(function() var radObj = $(#indicatorContainer2).data(radialIndicator); radObj.animate(100); ,300); /script /body /html radialIndicator.js 这是jquery的插件 /* radialIndicator.js v 1.0.0 Author: Sudhanshu Yadav Copyright (c) 2021 Sudhanshu Yadav - , released under the MIT
5、license. Demo on: */ ;(function ($, window, document) use strict; /circumfence and quart value to start bar from top var circ = Math.PI * 2, quart = Math.PI / 2; /function to convert hex to rgb function hexToRgb(hex) / Expand shorthand form (e.g. 03F) to full form (e.g. 0033FF) var shorthandRegex =
6、 /#?(a-fd)(a-fd)(a-fd)$/i; hex = hex.replace(shorthandRegex, function (m, r, g, b) return r + r + g + g + b + b; ); var result = /#?(a-fd2)(a-fd2)(a-fd2)$/i.exec(hex); return result ? parseInt(result1, 16), parseInt(result2, 16), parseInt(result3, 16) : null; function getPropVal(curShift, perShift,
7、bottomRange, topRange) return Math.round(bottomRange + (topRange - bottomRange) * curShift / perShift); /function to get current color in case of function getCurrentColor(curPer, bottomVal, topVal, bottomColor, topColor) var rgbAryTop = topColor.indexOf(#) != -1 ? hexToRgb(topColor) : topColor.match
8、(/d+/g), rgbAryBottom = bottomColor.indexOf(#) != -1 ? hexToRgb(bottomColor) : bottomColor.match(/d+/g), perShift = topVal - bottomVal, curShift = curPer - bottomVal; if (!rgbAryTop | !rgbAryBottom) return null; return rgb( + getPropVal(curShift, perShift, rgbAryBottom0, rgbAryTop0) + , + getPropVal
9、(curShift, perShift, rgbAryBottom1, rgbAryTop1) + , + getPropVal(curShift, perShift, rgbAryBottom2, rgbAryTop2) + ); /to merge object function merge() var arg = arguments, target = arg0; for (var i = 1, ln = arg.length; i ln; i+) var obj = argi; for (var k in obj) if (obj.hasOwnProperty(k) targetk =
10、 objk; return target; /function to apply formatting on number depending on parameter function formatter(pattern) return function (num) if(!pattern) return num.toString(); num = num | 0 var numRev = num.toString().split().reverse(), output = pattern.split().reverse(), i = 0, lastHashReplaced = 0; /ch
11、anges hash with numbers for (var ln = output.length; i ln; i+) if (!numRev.length) break; if (outputi = #) lastHashReplaced = i; outputi = numRev.shift(); /add overflowing numbers before prefix output.splice(lastHashReplaced+1, output.lastIndexOf(#) - lastHashReplaced, numRev.reverse().join(); retur
12、n output.reverse().join(); /circle bar class function Indicator(container, indOption) indOption = indOption | ; indOption = merge(, radialIndicator.defaults, indOption); this.indOption = indOption; /create a queryselector if a selector string is passed in container if (typeof container = string) con
13、tainer = document.querySelector(container); /get the first element if container is a node list if (container.length) container = container0; this.container = container; /create a canvas element var canElm = document.createElement(canvas); container.appendChild(canElm); this.canElm = canElm; / dom ob
14、ject where drawing will happen this.ctx = canElm.getContext(2d); /get 2d canvas context /add intial value this.current_value = indOption.initValue | indOption.minValue | 0; Indicator.prototype = constructor: radialIndicator, init: function () var indOption = this.indOption, canElm = this.canElm, ctx
15、 = this.ctx, dim = (indOption.radius + indOption.barWidth) * 2, /elm width and height center = dim / 2; /center point in both x and y axis /create a formatter function this.formatter = typeof indOption.format = function ? indOption.format : formatter(indOption.format); /maximum text length; this.max
16、Length = indOption.percentage ? 4 : this.formatter(indOption.maxValue).length; canElm.width = dim; canElm.height = dim; /draw a grey circle ctx.strokeStyle = indOption.barBgColor; /background circle color ctx.lineWidth = indOption.barWidth; ctx.beginPath(); ctx.arc(center, center, indOption.radius,
17、0, 2 * Math.PI); ctx.stroke(); /store the image data after grey circle draw this.imgData = ctx.getImageData(0, 0, dim, dim); /put the initial value if defined this.value(this.current_value); return this; , /update the value of indicator without animation value: function (val) /return the val if val
18、is not provided if (val = undefined | isNaN(val) return this.current_value; val = parseInt(val); var ctx = this.ctx, indOption = this.indOption, curColor = indOption.barColor, dim = (indOption.radius + indOption.barWidth) * 2, minVal = indOption.minValue, maxVal = indOption.maxValue, center = dim /
19、2; /limit the val in range of 0 to 100 val = val minVal ? minVal : val maxVal ? maxVal : val; var perVal = Math.round(val - minVal) * 100 / (maxVal - minVal) * 100) / 100, /percentage value tp two decimal precision dispVal = indOption.percentage ? perVal + % : this.formatter(val); /formatted value /
20、save val on object this.current_value = val; /draw the bg circle ctx.putImageData(this.imgData, 0, 0); /get current color if color range is set if (typeof curColor = object) var range = Object.keys(curColor); for (var i = 1, ln = range.length; i ln; i+) var bottomVal = rangei - 1, topVal = rangei, b
21、ottomColor = curColorbottomVal, topColor = curColortopVal, newColor = val = bottomVal ? bottomColor : val = topVal ? topColor : val bottomVal val topVal ? indOption.interpolate ? getCurrentColor(val, bottomVal, topVal, bottomColor, topColor) : topColor : false; if (newColor != false) curColor = newC
22、olor; break; /draw th circle value ctx.strokeStyle = curColor; /add linecap if value setted on options if (indOption.roundCorner) ctx.lineCap = round; ctx.beginPath(); ctx.arc(center, center, indOption.radius, -(quart), (circ) * perVal / 100) - quart, false); ctx.stroke(); /add percentage text if (i
23、ndOption.displayNumber) var cFont = ctx.font.split( ), weight = indOption.fontWeight, fontSize = indOption.fontSize | (dim / (this.maxLength - (Math.floor(this.maxLength*1.4/4)-1); cFont = indOption.fontFamily | cFontcFont.length - 1; ctx.fillStyle = indOption.fontColor | curColor; ctx.font = weight
24、 + + fontSize + px + cFont; ctx.textAlign = center; ctx.textBaseline = middle; ctx.fillText(dispVal, center, center); return this; , /animate progressbar to the value animate: function (val) var indOption = this.indOption, counter = this.current_value | indOption.minValue, self = this, incBy = Math.
25、ceil(indOption.maxValue - indOption.minValue) / (indOption.frameNum | (indOption.percentage ? 100 : 500), /increment by .2% on every tick and 1% if showing as percentage back = val counter; /clear interval function if already started if (this.intvFunc) clearInterval(this.intvFunc); this.intvFunc = s
26、etInterval(function () if (!back counter = val) | (back counter = val) if (self.current_value = counter) clearInterval(self.intvFunc); return; else counter = val; self.value(counter); /dispaly the value if (counter != val) counter = counter + (back ? -incBy : incBy) ; /increment or decrement till co
27、unter does not reach to value , indOption.frameTime); return this; , /method to update options option: function (key, val) if (val = undefined) return this.optionkey; if (radius, barWidth, barBgColor, format, maxValue, percentage.indexOf(key) != -1) this.indOptionkey = val; this.init().value(this.cu
28、rrent_value); this.indOptionkey = val; ; /* Initializer function */ function radialIndicator(container, options) var progObj = new Indicator(container, options); progObj.init(); return progObj; /radial indicator defaults radialIndicator.defaults = radius: 50, /inner radius of indicator barWidth: 5,
29、/bar width barBgColor: #eeeeee, /unfilled bar color barColor: #99CC33, /filled bar color , can be a range also having different colors on different value like 0 : #ccc, 50 : #333, 100: #000 format: null, /format indicator numbers, can be a # formator ex (#,#.#) or a function frameTime: 10, /miliseco
30、nds to move from one frame to another frameNum: null, /Defines numbers of frame in indicator, defaults to 100 when showing percentage and 500 for other values fontColor: null, /font color fontFamily: null, /defines font family fontWeight: bold, /defines font weight fontSize : null, /define the font
31、size of indicator number interpolate: true, /interpolate color between ranges percentage: false, /show percentage of value displayNumber: true, /display indicator number roundCorner: false, /have round corner in filled bar minValue: 0, /minimum value maxValue: 100, /maximum value initValue: 0 /defin
32、e initial value of indicator ; window.radialIndicator = radialIndicator; /add as a jquery plugin if ($) $.fn.radialIndicator = function (options) return this.each(function () var newPCObj = radialIndicator(this, options); $.data(this, radialIndicator, newPCObj); ); ; (window.jQuery, window, document, void 0); 以上所述是我给大家介绍的JS实现环形进度条（从0到100%）效果 ，盼望对大家有所关心 .