JS实现环形进度条（从0到100%）效果

    
 
 
￥4999
账户总览

 /* radialIndicator.js v 1.0.0 Author: Sudhanshu Yadav Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license. Demo on: ignitersworld.com/lab/radialIndicator.html */ ;(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 = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, function (m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null; } function getPropVal(curShift, perShift, 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(/\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, rgbAryBottom[0], rgbAryTop[0]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[1], rgbAryTop[1]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[2], rgbAryTop[2]) + ')'; } //to merge object function merge() { var arg = arguments, target = arg[0]; for (var i = 1, ln = arg.length; i  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 //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  bottomVal && val = 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 counter does not reach to value }, indOption.frameTime); return this; }, //method to update options option: function (key, val) { if (val === undefined) return this.option[key]; if (['radius', 'barWidth', 'barBgColor', 'format', 'maxValue', 'percentage'].indexOf(key) != -1) { this.indOption[key] = val; this.init().value(this.current_value); } this.indOption[key] = 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, //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, //miliseconds 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 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 //define 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));