Recientemente, este tipo de efecto similar a una barra de progreso del anillo se utiliza en los proyectos de la compañía, a partir de 0 hasta terminar 100%. Los resultados de la animación siempre permanecerán al 100%y no permanecerán a la mitad debido a las relaciones de datos.
Como se muestra
El código es el siguiente
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 = "visual" contenido = "width = dispositivo-width, inicial a escala = 1.0 "> <title> demo </title> <style> .rad-prg {posición: relativa;}. rad-Con {posición: absoluto; z-index: 1; top: 0; izquierda: 0; text-aline Yahei ";} </ystye> </head> <body> <div id =" indicativeContainer "> <div> <p> ￥ 4999 </p> <p> Descripción general de la cuenta </p> </div> <script type =" text/javaScript "src =" js/jQuery.min.js "> </script> <scrito> src = "js/radialindicator.js"> </script> <script> $ ('#indicatorContainer'). Radialindicator ({Barcolor: '#007aff', barwidth: 5, initValue: 0, redondeborner: true, porcentaje: true, visual $ ('#indicationContainer2'). Data ('RadialIndicator'); RADOBJ.Animate (100);}, 300); </script> </body> </html>radialindicator.js Este es un complemento para jQuery
/*Radialindicator.js v 1.0.0author: Sudhanshu YadavCopyright (c) 2015 Sudhanshu Yadav - IgnitersWorld.com, lanzado bajo el MIT License.Demo on: IgnitersWorld.com/lab/radialindicator.html**/;(función ($, Window, documento) {"Usar Estréjate"; Valor para iniciar la barra de topvar circ = math.pi * 2, cuart = math.pi/2; // función para convertir hex en rgbfunction hextorgb (hex) {// expandir la forma de falla (p. Ej. "03f") /^#? ([[af/d]) ([af/d]) ([af/d]) ([af/d]) $/i; hex = hex.replace (shortthandregex, function (m, r, g, b) {return r + r + g + g + b + b;}); var resultado = /^#?(timaf/dfont> ])(barf/dfont> ])(barf/dfont>2})$/i.exec(hex);return resultado? Math.round (BottomRange + ((TopRange - BottomRange) * Curshift/Pershift));} // Función para obtener el color actual en el caso de la función GetCurrentColor (curper, BottomVal, TopVal, BottomColor, TopColor) {var rgBarytop = topColor.indexof ('#')! = -1? topColor.match (// d+/g), rgBaryBottom = BottomColor.IndexOf ('#')! = -1? 'rgb (' + getPropval (curshift, pershift, rgbarybottom [0], rgbarytop [0]) + ',' + getPropval (curshift, pershift, rgbarybottom [1], rgBarytop [1]) + ', + getPropval (curshift, pershift, rgBarybottom [2], 2], rgBarytop [2])+')';} // para fusionar ObjectFunction Merge () {var arg = arguments, target = arg [0]; for (var i = 1, ln = arg.length; i <ln; i ++) {var obj = arg [i]; for (var k en obj) {if (obj.hasownproperty (k)) obj [k];}}} Target de retorno;} // Función para aplicar el formato en el número dependiendo de la formación de parámetros (patrón) {function de return (num) {if (! 0, lASTHASHREPLACED = 0; // Cambia hash con Numbersfor (var ln = output.length; i <ln; i ++) {if (! NumRev.length) break; if (output [i] == "#") {lASTHASHReplaced = i; output [i] = numRev.Shift ();}/} // Add Overflowing Numbers antes de flotar prefixoutput.splice (lASTHASHREPLACED+1, Output.lastIndexOf ('#') - LASTHASHREPLACE, Numrev.reverse (). Join ("")); return outption.Reverse (). Join ('');} // Indicador de clases de círculo (contenedor, contenedor) fusion ({}, radialindicator.defaults, indoption); Container; // Cree un Canvas ElementVar Canelm = document.createElement ("Canvas"); Container.appendChild (canelm); this.canelm = canelm // objeto doms Drawing Happenthis.ctx || indoption.MinValue || 0;} indicador.prototype = {constructor: radialindicator, init: function () {var indoption = this.indoption, canelm = this.canelm, ctx = this.ctx, dim = (indoption.radius + indoption.Barwidth) * 2, // elm. en el eje x y y crea una función de formateador. CircuitX.StrokeStyle = Indoption.BarbGColor; // Background Circle ColorCtX.LineWidth = Indoption.BarWidth; CTX.BEGINPATH (); CTX.ARC (Center, Center, indoption.radius, 0, 2 * Math.pi); ctx.getImagegeATA (0, 0, dim, dim); // Pon el valor inicial si se define this.Value (this.Current_Value); return this;}, // actualice el valor del indicador sin animationValue: function (val) {// return the val si no se proporciona (val === inventoso || 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/2; // limit en el rango de 0 val. Minval? ObjectThis.current_value = val; // Dibuja el circuito BG.putimagege (this.imgdata, 0, 0); // Obtener color actual si el rango de color es setif (typeof curcolor == "object") {var range = object.Keys (curcolor); para (var i = 1, ln = range.length; i <ln; i ++) {var dotte 1], topval = range [i], fondo de la parte topColor): topColor: false; if (newColor! = false) {curcolor = newColor; break;}}} // dibuje th circle valuex.StrokeStyle = curcolor; // agrega Linecap If Value configurado en opciones (indoption.roundCorner) ctx.lineCap = "redondea"; ctx.Beginpath (); Center, indoption.radius, - (Quart), ((Circ) * perval /100) - Quart, falso); ctx.stroke (); // Agregar porcentaje textif (indoption.displaynumber) {var cfont = ctx.font.split (''), weats = indoption.fontweight, fontsize = indoption.fontsize | (this.maxLength - (Math.Floor (this.maxlength*1.4/4) -1))); cfont = indoption.fontfamily || cfont; ctx.Textalign = "Center"; ctx.TextBaseline = 'Middle'; ctx.fillText (dispwal, centro, centro);} return this;}, // Animate ProgressBar a ValueAnimate: function (val) {var indoption = this.indopción, contador = this.current_value || Math.Ceil ((indoption.maxValue - indoption.minvalue)/(indoption.framenum || (indoption.percentage? 100: 500)), // increment en .2% en cada tick y 1% si se muestra como porcentaje = val <contra; // función de intervalo clara si ya se inició (this.intvfInc) setInterval (function () {if ((! Back && contar> = val) || (back && contar <= val)) {if (self.current_value == contador) {clearinterval (self.intvfunc); return;} else {contar = val;}} self.Value (contra); // Dispal Incby)};//Incremento o disminución de hasta que el contador no alcanza el valor}, indoption.frametime); devuelve esto;}, // método para actualizar opciones: function (key, val) {if (val === Undefined) return this.option [Key]; if ('Radius', 'BarWidth', 'BarbgColor', 'Format', 'MAXValue', ',', ',', ',' MAXValue ', 'porcentaje']. indexOf (key)! = -1) {this.indOption [key] = val; this.init (). Value (this.current_value);} this.indOption [key] = val;}}};/** Función inicial **/functionDicator (contenedor, opciones) {var progobj = nuevo indicador (contenedor, contenedor); prolante; progobj;} // indicador radial defaultsradialindicator.defaults = {Radius: 50, // Radius interno de indicadorBarWidth: 5, // bar widthBarbgColor: '#eeeeeeeeee', // ColorBarcolor de barra sin problemas: '#99CCC33', // Color de barra llena, puede ser un rango también con un rango de diferentes colores. "#ccc", 50: '#333', 100: '#000'} formato: nulo, // Los números de indicador de formato, pueden ser una#formatter ex (##, ##. ##) o un functreFrameTime: 10, // miliseConds para moverse de un marco a otroframenum: null, // define los números de marco en indicador, predeterminados a 100 cuando se muestran porcentaje y 500 para otro marco para otro marco a otro. valoresfontColor: null, // font colorfontfamily: null, // define font familiarfontweight: 'bold', // define font weightfontsize: null, // Define el tamaño de fuente del indicador numerointerpolate: true, // Interpolar color entre rangespercentage: falso, // Mostrar porcentaje de valoros de valor valorado: verdadero, verdadero, verdadero, verdadero, // Mostrado // tiene una esquina redonda en BarminValue llena: 0, // mínimo valueMaxValue: 100, // máximo valueinitValue: 0 // define el valor inicial del indicador}; window.radialindicator = radialindicator; // Agregar como un pluginif ($) {$ .fn.radialindicator = function (opciones) {retorno esto newpcobj = radialindicator (this, options); $. data (this, 'radialindicator', newpcobj);});};}} (window.jquery, ventana, documento, void 0));Lo anterior es el efecto de la barra de progreso del anillo de implementación JS (de 0 a 100%) introducido por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!