本文实例讲述了框架进度条功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html hearteta charset=' utf8 '/title www .jb51。net进度条/title style=' text/CSS ' # div进度条{ width :300 px高度：30 px} .进度-标签{ float:left保证金-左侧：40%;页边距-top :3 px；}/stylelink rel='样式表href=' https://cdn。bootcss。com/jquery yui/1。11 .0/jquery-ui。CSS ' rel='外部no follow ' media=' screen '/script src=' http :3359 libs。百度。com/jquery/1。10 .2/jquery。量滴js '/script脚本类型=' text/JavaScript ' src=' http :33333./div/div脚本类型=' text/JavaScript ' $(function(){//var val=0；$('#divprogressbar ').进度条({ value :0 })；$('#divprogressbar ').progressbar({ value:0，change:function(){ $(')).进度-标签')。文本($('#divprogressbar ').进度条(' value ')' % ')；}，complete:function(){ $(' .进度-标签')。文本('完成！');} });函数进度(){ var val=$(' # div进度条').进度条('值')| | 0；$('#divprogressbar ').progressbar('option '，' value '，val 1)；if(val99) { setTimeout(进度，100);} } setTimeout(进度，1000);} );/脚本/正文/html运行效果：

查看文档：http://jqueryui.com/progressbar/

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

更多关于框架相关内容可查看本站专题： 《jQuery页面元素操作技巧汇总》 、 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。