jQuery進度條外掛JQMeter的簡單使用
阿新 • • 發佈：2019-02-17
jQMeter是一款簡單使用的輕量級進度條jQuery外掛
效果圖：該效果時設定了進度條寬度，高度，動畫時間，計數時間，寬度，高度
使用過程
1.需要引入的js檔案
基於jQuery的：<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
jQMeter的：<script type="text/javascript" src="jqmeter.js"></script>
jQuery的js檔案是從CDN中載入的
（為了方便，html檔案和js檔案是放在同一個目錄下，好一點的結構可以將js檔案放在另外單獨建的js資料夾中）
2.html中寫一個空div，設定id： <div id="jqmeter-container"></div>
3.在js中初始化進度條：
$(function(){$('#jqmeter-container').jQMeter({
goal:'1000',//進度條總長度(指的是進度)，必須的引數
raised:'400',//進度條當前進度，必須的引數
width:'200px',//顯示的進度條的寬度
height:'50px',//顯示的進度條的寬度
animationSpeed:2000,//進度條動畫的時間
counterSpeed:3000,//進度條計數的時間
});
})
這個一個比較簡單的使用，更詳細的一些學習可以參考網站：http://www.jq22.com/jquery-info5283
網站中會有外掛的其他引數的介紹，垂直的進度條本人沒有使用成功
所有程式碼截圖：
