jquery怎么实现百分比记分进度条

这篇文章主要介绍了jquery怎么实现百分比记分进度条，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

jquery实现百分比记分进度条的具体内容如下

先看效果

代码如下

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   });   // Progressing   progressFill.animate(    {     width: options.percentage + "%"    },    {      step: function(x) {      if(options.ShowProgressCount){       $(el).find(".percentCount").text("("+Math.round(x) + "分"+")");      }     },     duration: options.duration    }   );  }); }})(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,0,0,.1);}.proggress{ 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了。

感谢你能够认真阅读完这篇文章，希望小编分享的“jquery怎么实现百分比记分进度条”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!