최근에, 링 진행 막대와 유사한 이러한 종류의 효과는 회사 프로젝트에서 0에서 100%로 끝나는 회사 프로젝트에서 사용됩니다. 애니메이션 결과는 항상 100%로 유지되며 데이터 관계로 인해 중간에 머무르지 않습니다.
그림처럼
코드는 다음과 같습니다
demo.html
<! doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "ie edge, chrome = 1"> <meta name = "viewport"content = "width = device-width, 초기 스케일 = 1.0 "> <title> demo </title> <style> .rad-prg {position : report;}. rad-con {position : absolute; z-index : 1; top : 0; 왼쪽 : 0; 텍스트-정렬 : 중심; 너비 : 90px; 높이 : 90px; 패딩 : 10px; font-family :"마이크로 소프트 yahei ";}} </style> </head> <body> <div id ="indicatorContainer "> <div> <p> 4999 </p> <p> 계정 개요 </p> </div> <script type ="text/javaScript "src ="js/jquery.min.js "> <스크립트> <스크립트> < src = "js/radialindicator.js"> </script> <cript> <cript> $ ( '##eldickatorContainer'). 방사형 인디케이터 ({barcolor : '#007aff', barwidth : 5, initvalue : 0, RoundCorner : true, 백분율 : true, displaynumber : false : 50}; $ ( '#eldickatorContainer2'). data ( 'radialindicator'); radobj.animate (100);}, 300); </script> </body> </html>radialindicator.js 이것은 jQuery 용 플러그인입니다
/* radialindicator.js v 1.0.0author : sudhanshu yadavcopyright (c) 2015 Sudhanshu Yadav -Ignitersworld.com, mit license.demo on : ignitersworld.com/lab/radialindicator.html*/; forection ($, smittic). Topvar Circ = Math.pi * 2, Quart = Math.pi/2; // 16 진수를 rgbfunction hextorgb (hex)로 변환하는 함수 {// 속기 양식 (예 : "03f") 전체 형태 (예 : "0033ff"var shorthandregex = var shorthandregex =. /^#? /^#? (} {2 })) (af/d] {2 })$/i.exec(hex); [parseint (결과 [1], 16), 16), parseint (결과 [3], 16) : null;} getpropval (curshift, parshift,) math.range ((TopRange -BottomRange) * curshift/pershift);} // 기능의 경우 현재 색상을 얻을 수 있습니다. 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) rgbarytop [2])+')';} // 객체 기능 merge () {var arg = arguments, target = arg [0]; for (var i = 1, ln = arg.length; i <ln; i ++) {var obj = arg [i]; for (var k in obj) {if (k)) {if (k)). obj [k];}}} return target;} // parameterfunction formatter (pattern)에 따라 숫자에 대한 형식을 적용 할 수 있습니다 0, lasthashReplaced = 0; // numbersfor (var ln = output.length; i <ln; i ++) {if (! numrev.length) break; if (output [i] == "#") {lasthashReppaced = i; output [i] = numrev.shift ()}} // Overflard Number Add prefixoutput.splice (lasthashReplaced+1, output.lastIndexof ( '#') - lasthashReplaced, numrev.reverse () merge ({}, radialindicator.defaults, indoption); indoption = indoption; // 선택기 문자열이 containerif (typeof container == "string") 컨테이너를 전달하면 컨테이너 (container)가있는 경우 첫 번째 요소를 가져옵니다. 컨테이너; // 캔버스 ementvar canelm = createElement ( "canvas"); 컨테이너 (canelm); canelm = canelm; indoption.initValue || minValue ||} indicator.prototyp : init : function (var indoption = this.indoption, canelm = this.canelm, ctx = ctx = indoption.radius) * 2) * 2) * 2). = x와 y 축의 중심 지점 // formatter thathits.format == "function": formatter (indoption.format); dim; canelm.height = dim; // 회색 회로 x.strokestyle = indoption.barbgcolor를 그리십시오. Circle DrawThis.imgdata = ctx.getImagedata (0, 0, dim, dim); // this.value (this.current_value)를 정의하면 초기 값을 넣습니다. 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.maxal. 0 ~ 100val의 val <minval : val; maxval? value // value val을 objectthis.current_value = val; // bg circuitx.putImagedata (this.imgdata, 0, 0)로 저장합니다. // 색상 범위가 setif 인 경우 현재 색상을 가져옵니다 (curcolor == "object") {var range = object.keys (curcolor); (var i = 1, ln = range.lengen [i -1], topval = range [i], curcolor [bottomval], topcolor [topval], val == topcolor? BottomColor, topColor) : topColor : false; if (newColor! = false) {curcolor = newColor; break;}}} // 옵션에 설정된 경우 값을 추가하면 Linecap을 추가합니다. "라운드"; ctx.beginpath (); ctx.arc (중심, 중앙, indoption.radius, - (쿼트), ((Circ) * perval/100) - 쿼트, 거짓); ctx.stroke (); // 백분율 textif (indoption.displaynumber) {var cfont = ctx.font.split ( '') indoption.fontsize = indoption.fontsize || = weight + "" + fontsize + "px" + cfont; ctx.textalign = "center"; ctx.textbaseline = 'middle'; ctx.filltext (dispval, center, center);}}, // valuanmate : var indoption = this. this. this. this. this. this. indoption.minValue, self = this, incbo = math.ceil ((indoption.maxvalue -indoption.minvalue)/(indoption.framenum || (indoption.percentage? 100 : 500)), // 1%로 .2%가 증가하고 1% <카운터로 표시되면 1). ClearInterval (this.intvfunc); intvfunc = setInterval (function ((! back && counter> = val)) {if (self.current_value == counter) {clearinterval (self.intvfunc); val;}} self.val; (Counter! = val) {counter = counter + (back? -incby : incby)}; // 카운터가 값에 도달하지 않을 때까지}, indoption.frametime); '형식', 'maxvalue', 'centage']. indexof (key)! = -1) {this.indoption [key] = val; this.init (). value (this.current_value);} this. this. indoption [key] = val;}};/** 초기 기능 **/functionator (container, 옵션) {var progobj = var var progobj. 옵션); progobj.init (); return progobj;} // radial indicator defaultsradialindicator.defaults = {radius : 50, // indicatorbarwidth : 5, // bar widthbarbgcolor : // Unfured Bar Colorbarcolor : '#99cc33', // {0 : "#ccc", 50 : '#333', 100 : '#000'} 형식 : null, // 형식 표시기 번호, // 형식 지표 번호는#formatter ex (##, ##. ##) 또는 기능 프레임 타임 또는 10, 다른 프레임 um : // defator in null in when 기타 valuesFontColor : null, // font colorfontfamily : null, // font familyfontweight : // font weightfontsize : // 숫자의 글꼴 크기를 정의합니다. 표시기 번호 roundcorner : false, // 채워진 BarminValue : 0, // 최소 valuemaxValue : 100, // maximum valueInitValue : 0 // indicator의 초기 값을 정의}; window.radialindicator = radialIndicator; // jquery plug ($) {$. $ .radialindicator = inturents = inturents (radialIndicator; //) {$. this.each (function () {var newpcobj = radialindicator (this, 옵션); $. data (this, 'radialindicator', newpcobj);});};}} (window.jquery, window, document, void 0);위는 편집자가 도입 한 JS 구현 링 진행 막대 (0 ~ 100%)의 효과입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!