jquery實現百分比記分進度條
阿新 • • 發佈:2021-04-30
本文例項為大家分享了jquery實現百分YeMZejZIiM比記分進度條的具體程式碼,供大家參考,具體內容如下
1.先看效果
2.程式碼如下
jquery.lineProgressbar.js程式碼如下
(function($){ 'use strict'; $.fn.LineProgressbar = function(options){ var options = $.extend({ percentage : null,ShowProgressCount: true,duration: 1000,// Styling Options fillBackgroundColor: '#3498db',backgroundColor: '#EEEEEE',radius: '0px',height: '10px',width: '100%' },options); return this.each(function(index,el) { // Markup $(el).html('<div class="progressbar"><div class="proggress"></div></div><div class="percentCount"></div>'); var progressFill = $(el).find('.proggress'); var progressBar= $(el).find('.progressbar'); progressFill.css({ backgroundColor : options.fillBackgroundColor,height : options.height,borderRadius: options.radius }); progressBar.css({ width : options.width,backgroundColor : options.backgroundColor,borderRadius: options.radius });http://www.cppcns.com // Progressing progressFill.animate( { width: options.percentage + "%" },{ step: function(x) { if(options.ShowProgressCount){程式設計客棧 $(el).find(".percentCount").text("("+Math.round(x) + "分"+")"); } },duration: options.durhttp://www.cppcns.comation } ); }); } })(jQuery);
jquery.lineProgressbar.css樣式程式碼如下
#progressbar1{ display: flex; height: 15px; } .progressbar { width: 50%; margin-top: 5px; position: relative; background: #182746 !important; border-radius: 6px !important; box-shadow: inset 0px 1px 1px rgba(0,.1); } .prog程式設計客棧gress{ height: 8px; width: 10px; background: linear-gradient(to right,rgb(13,93,176),rgb(32,177,223)) !important; border-radius: 6px !important; } .percentCount{ white-space: nowrap; margin-left: 10px; font-size: 14px; }
這樣就可以實現記分條,百分比的話只需要將分改成%就OK了。
直接用!!!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。