ProgressBar（进度条）组件，这个还是挺好玩的，我们在自己做点什么的时候经常能用到，比如上传下载文件、导入导出文档啊、载入网页等等。
应用场景很多，使用起来还很简单。
示例：
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="https://www.jb51.net/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/easyui/locale/easyui-lang-zh_CN.js" ></script> <link type="text/css" href="https://www.jb51.net/easyui/themes/bootstrap/easyui.css" /> <link type="text/css" href="https://www.jb51.net/easyui/themes/icon.css" /> <script> $(function () { //$.fn.progressbar.defaults.value = 30; //想要修改进度条的颜色去css文件中去修改 $('#box').progressbar({ width : 200, //设置进度条宽度 默认400 height : 15, //设置进度条高度 默认22 value : 0, //设置进度条值 默认0 text : '{value}%', //设置进度条百分比模板 默认 {value}% //在value改变的时候触发 onChange : function (newValue, oldValue) { console.log('新:' + newValue + ',旧:' + oldValue); }, }); /* setTimeout(function () { $('#box').progressbar('setValue', 70); }, 1000); */ setInterval(function () { //getValue setValue 分别是返回当前进度值 和 设置一个进度值 $('#box').progressbar('setValue', $('#box').progressbar('getValue') + 5); }, 1000); console.log($('#box').progressbar('options')); //$('#box').progressbar('resize', 80); 没啥大用 }); </script> </head> <body> <!-- <div data-options="value:60"></div> --> <div ></div> </body> </html>
执行效果：
点击下载源代码：jQuery ProgressBar进度条组件