jquery模拟进度条实现方法

本文实例讲述了jquery模拟进度条实现方法。分享给大家供大家参考。具体如下：

！doctype html html ownerta charset=' utf-8 ' title js模拟进度条练习/title脚本类型=' text/JavaScript ' src=' http :3358 Xia zai。JB 51。net/201508/马援/jquery-1。8 .0 .量滴js '/script脚本类型=' text/JavaScript ' src=' http://Xia zai。JB 51。net/201508/马援/jquery.artDialog.js？skin=default '/script style body { font-size :12 px } .澳大利亚西北地区.奥伊内.aui_sw，aui _ se { height: 1px宽度： 1px}.aui_outer，aui _ inner {边框： 0；}.aui_state_lock .aui _ border { box-shadow : 0 10px rgba(0，0，0，8);}/style/head dybutton id=' starLoading '显示进度条/button div id=' MSghtml '/www .JB 51。net/div/body/html脚本(函数(w){ var _ html=' div style='行高： 30px文本对齐：中心；'正在为您载入数据，请稍后……/div div id=' jsLoadOuter ' style=' width :250 px；高度：8pxborder:#6BAAC9固体1pxbackground : # c0ebffmargin :0 autobox-shadow : 0 3px # 2e 94bb；padd :1 px ' div id=' jsLoadInner ' style=' background : # 54 aee 0；高度：100%;宽度：0 '/div/div '；var _ _ g；var _ MaxWidth=100 var _ NowWidth=0；var _ speed=30 var _ step=2；var _ _ time进度={ render :函数(fn){ fn(_ html)；_ nowWidth=0；_ _ g=文档。getelementbyid(' jsLoadInner ')；这个。FX()；}，完成：函数(fn){ clear time out(_ time)；progress.completeFn=fnthis。setover()；}，Setover : FuncTion(){ var _ stepa=_ step * 1.5；if(_ nowWidth _ maxWidth){ _ nowWidth=_ nowWidth-0 _ stepa；parseInt(_ nowWidth)parseInt(_ maxWidth)？_ nowWidth=_ maxwidth :_ _ g . style。width=' ' _ nowWidth ' %_ speed=(_ maxWidth-_ nowWidth)/1000；_ _时间=setTimeout('进度。setover()'，_ speed)；} else { clear time out(_ time)；进步。完成进度。complete fn()；};}，FX :函数(){ var _ stepa=_ stepif(_ nowWidth _ maxWidth-5){ _ stepa=_ nowWidth _ maxWidth * 0.6？(_ stepa * 0.02): _ stepa；_ nowWidth=_ nowWidth-0 _ stepa；parseInt(_ nowWidth)parseInt(_ maxWidth)？_ nowWidth=_ maxwidth :_ _ g . style。width=' ' _ nowWidth ' %__time=setTimeout('progress.fx()'，_ speed)；} else { clear time out(_ time)；};} } w . progress=progress })(window)/$(function(){ showLoading()；$(“正文”).on('click '，' #starLoading '，function(){ showLoading()；}) })函数showLoading(){ //开始显示进度条进步。render(函数(html){ art。对话框({ id : ' jsLoadingDialog '，title : ' \ u6b 63 \ u 5728 \ u52 a 0 \ u8f7d \ u4e 2d \ u 2026 \ u 2026 '，cancel:1,锁定：0，background:'#fff '，fixed:0，内容： html })；});//请求完成后完成进度条，模拟10秒后请求完成setTimeout(函数(){ progress。完整(函数(html){ art。对话。列表[' js loading dialog ']艺术。对话。列表[' jsloading dialog ']).close()；$('#msgHtml ').html(")进度条已走完');});},10000);};/script运行效果如下图所示：

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