Baru -baru ini, efek semacam ini mirip dengan bilah kemajuan cincin digunakan dalam proyek -proyek perusahaan, mulai dari 0 hingga berakhir 100%. Hasil animasi akan selalu bertahan 100%, dan tidak akan tetap di tengah jalan karena hubungan data.
Seperti yang ditunjukkan
Kodenya adalah sebagai berikut
demo.html
<! Doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <meta http-equiv = "konten x-ua-ua" = "IE = edge, chrome = 1"> <meta name = "viewport" konten = "lebar =-device-width, initial-scale=1.0"><title>demo</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 id="indicatorContainer"><div><p>￥4999</p><p>Account overview</p></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: false,radius: 50});setTimeout(function(){var radObj = $ ('#IndicatorContainer2'). Data ('RadialIndicator'); radobj.animate (100);}, 300); </script> </body> </html>RadialIndicator.js Ini adalah plugin untuk jQuery
/*radialIndicator.js v 1.0.0Author: Sudhanshu Yadavcopyright (c) 2015 Sudhanshu Yadav - ignitersworld.com, dirilis di bawah lisensi MIT.demo on: ignitersworld.com/lab) windure {"document ($, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $, $ { Untuk memulai bilah dari topvar circ = math.pi * 2, quart = math.pi/2; // fungsi untuk mengonversi hex menjadi rgbfunction hextorgb (hex) {// memperluas bentuk steno (misalnya "03f") ke bentuk lengkap (misalnya "0033ff") var shorthandregex = = EG "0033ff") var shorthandregex = = EG "0033ff") var shorthandregex = /^#? ([af/d]) ([af/d]) ([af/d]) ([af/d]) $/i; hex = hex.replace (shortthandregex, fungsi (m, r, g, b) {return r + r + g + g + b + b;}); var hasil = /^# ?(öaf/duarkan {2})($F/duarkan {2})( meja/duarkan {2 --)$/i.exec(hex); hasil retrok? Math.round (BottomRange + ((TopRange - BottomRange) * Curshift/Pershift));} // Fungsi untuk mendapatkan warna saat ini jika fungsi getCurrentColor (Curper, BottomVal, Topval, BottomColor, TopColor) {var rgbarytop = TopColor.indexof ('') {var rgbarytop = topcolor.indexof ('') {var rgbarytop = topcolor.indexof (' 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], rgbarytop [2])+')';} // Untuk menggabungkan fungsi objek gabungan () {var arg = argumen, target = arg [0]; untuk (var i = 1, ln = arg.length; i <ln; i ++) {var obj = arg [i]; untuk (var v di obj) {i if (ift) {var obj = arg); obj [k];}}} return target;} // fungsi untuk menerapkan format pada angka tergantung pada formatterfunction formatter (pola) {return function (num) {if (! Pattern) return num.tostring (); num = reverse 0var numRev = num.tostring (). split (''). 0, lasthashreplaced = 0; // mengubah hash dengan angka untuk (var ln = output.length; i <ln; i ++) {if (! NumRev.length) break; if (output [i] == "#") {lasthashReplaced = i; output [i] = numRev.shift (); prefixoutput.splice (lasthashreplaced+1, output.lastIndexOf ('#') - lasthashreplaced, numRev.reverse (). gabungan ("")); return output.reverse (). gabung ('');} // circle bar classfunction (container, container (container, container, container (container, container (container, container (container); {}; indoption = gabungan ({}, RadialIndicator.defaults, indoption); wadah [0]; this.container = container; // Buat Canvas ElementVar Canelm = Document.CreateElement ("Canvas"); Container.AppendChild (Canelm); canelm = canelm = canelm; ini. indoption.barwidth) * 2, // lebar elm dan heightcenter = redup/2; this.formatter (indoption.maxValue) .length; canelm.width = redup; canelm.height = redup; // gambar sirkuitx abu -abu. indoption.radius, 0, 2 * math.pi); ctx.stroke (); // Simpan data gambar setelah Grey Circle Drawthis.imgdata = ctx.getImagedata (0, 0, redup, redup); kembalikan valasi ini jika ditentukan ini. {// Kembalikan val jika val tidak disediakan (val === tidak terdefinisi || isnan (val)) {return this.current_value;} val = parseInt (val); var ctx = this.ctx, indoption = this.indoption, curcolor = indoption.barcolor, dim = (indoption. 2, minval = indoption.minvalue, maxval = indoption.maxValue, center = redup /2; // Batasi val dalam kisaran 0 hingga 100val = val <minval? Decimal PrecisionDispval = indoption.percentage? Object.keys (Curcolor); untuk (var i = 1, ln = range.length; i <ln; i ++) {var bottomval = range [i - 1], topval = range [i], BottomColor = Curcolor [Bottomval], Topcolor = Curcolor [Topval], newcolor = valcolor = BOURCOLOR > Bottomval && val <topval? (indoption.roundcorner) ctx.linecap = "round"; ctx.beginpath (); ctx.arc (tengah, center, indoption.radius, - (quart), ((sirk) * Perval/100) - false); ctx.stroke (); // Tambah persentase textage/100) - false); CTX.Stroke (); // Tambah persentase Textage/100) - QUART, FALSE); CTX.STROKE (); // Tambah persentase TEXTREOT (FALSET); CTX. ctx.font.split (''), weight = indoption.fontweight, fontsize = indoption.fontsize || (redup / (this.maxlength - (math.floor (this.maxlength*1.4 / 4) -1)); cfont = indoption.fontfamily; indoption.fontcolor ||. indoption = this.indoption, counter = this.current_value || sebagai persentase = val <counter; // function interval yang jelas jika sudah dimulaif (this.intvfunc) clearinterval (this.intvfunc); {counter = val;}} self.value (counter); this.option [Key]; if (['radius', 'barwidth', 'barbgcolor', 'format', 'maxValue', 'persentase']. IndexOf (Key)! = -1) {this.indoption [key] = val; this.init (). Nilai (ini. function **/function radialIndicator(container, options) {var progObj = new Indicator(container, options);progObj.init();return progObj;}//radial indicator defaultsradialIndicator.defaults = {radius: 50, //inner radius of indicatorbarWidth: 5, //bar widthbarBgColor: '#eeeeeeee', // Bar Colorbarcolor yang tidak terisi: '#99cc33', // Warna batang yang diisi, dapat berupa kisaran yang juga memiliki warna yang berbeda pada nilai yang berbeda seperti {0: "#ccc", 50: '#333', 100: '#000'} format: Null, // Nomor indikator format, dapat berupa#formatter (##,#", ##ec. frame to anotherframeNum: null, //Defines numbers of frame in indicator, defaults to 100 when showing percentage and 500 for other valuesfontColor: null, //font colorfontFamily: null, //defines font familyfontWeight: 'bold', //defines font weightfontSize : null, //define the font size of indicator numberinterpolate: true, //interpolate color between Rangespercentage: false, // Tunjukkan persentase dari complay -maunder: true, // menampilkan indikator numberroundcorner: false, // memiliki sudut bulat dalam nilai barmin yang diisi: 0, // minimum valuemaxValue: 100,//nilai maximum nilaiK: 0 // tentukan nilai awal indikator}; window.coileic =cadial; ($) {$ .fn.radialIndicator = fungsi (opsi) {return this.each (function () {var newpcoBj = radialIndicator (this, opsi); $.Di atas adalah efek bilah progress cincin implementasi JS (dari 0 hingga 100%) yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!