基于Ajax的JS网页加载效果代码

本文描述了基于Ajax的JS加载效果代码。分享给大家参考，如下：

这是一个非常好的网页加载效果，在Ajax交互网页设计中经常用到。单击按钮弹出加载框。如果加载框未加载，网页关闭，会弹出确认提示框，用于一些对安全性能要求较高的网页的交互处理，如支付操作。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-ajax-web-loading-style-codes/

具体代码如下：

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312'title很不错的网页埃阿斯加载效果/title/head body STYLe=' FONT-SiZe : 10pt；FONT-FAMILY: Verdana，Arial，Helvetica ' script LANGUAGE=' JScript ' var NUMBER _ OF _ replications=40；定义变量重复分区=0;var g _ oTimer=null函数startLongProcess(){ DivProgressDialog。风格。display=ResizeModal()；btncancel。焦点()；window . onresize=resizeModalwindow。onbeforeunload=显示警告；continueLongProcess()；}函数更新进度(NnewPercent){ DivProgressinner。风格。width=(ParSeint(DivProgreSextern。风格。宽度)* NnewPercent/100)' px '；}函数叠音流程(){ if (g_oTimer！=null){ window。clear time out(g _ oTimer)；g _ oTimer=null} //隐藏假模态DIV模态。风格。宽度=' 0pxdiv模式。风格。高度=' 0pxdiffprogressdialog。风格。显示='无'；//移除我们的事件处理程序窗口window.onbeforeunload=nulln重复分区=0;}函数continueLongProcess(){ if(nrepe分区NUMBER _ OF _ replications){ var nTimeoutLength=math。random()* 250；更新进度(100 *重复分区/重复次数);g _ oTimer=window。settimeout(' continueLongProcess()；'，nTimeoutLength)；n重复分区；} else {停用流程();} }函数showWarning(){ return '导航到不同的页面或刷新窗口可能会导致您丢失宝贵的数据\ n \你确定要这么做吗；}函数ResizeModal(){ DivModal。风格。宽度=文档。尸体。scrollwidthdiv模式。风格。高度=文档。尸体。滚动高度；divprogressdialog。风格。left=((文档。尸体。offsetwithts-divprogressdialog。offset withts)/2)；divprogressdialog。风格。top=((文档。尸体。offset heat-divprogressdialog。抵消热量)/2)；}/脚本输入类型=' BUTTON '值='单击我！onclick=' startLongProcess()；-BEGIN PROGRESS DIALOG-DIV STYLE='边框：按钮高亮显示2px BEGINFONT-SiZe : 8磅；z指数：4；FONT-family : Tahoma；绝对位置：背景-颜色：按钮面；显示器：无；宽度： 350像素；CURSOR:默认值在selectstart='窗口上ID=' divProgressDialog '。事件。返回值=falseDIV STYLE=' padd : 3px font-weight :更粗；颜色：字幕；边框-BOTTOM:白色2px凹槽；背景-颜色：活动标题'加载中……/DIV DIV STYLe=' padd : 5px '请稍等，网页正在处理中……/DIV DIV STYLe=' padd : 5px '可能需要数秒钟/DIV DIV STYLe=' padd : 5px ' DIV ID=' DIV progress outer ' STYLe='边框： 1px立体三轴；宽度： 336 px高度： 15px ' DIV ID=' DIV progressner ' STYLe=' color : '白色；文本-对齐3 3360居中；背景-颜色：信息背景；余量： 0px宽度： 0px高：13 px/DIV/DIV/DIV样式='边框-TOP:白色2px凹槽；PADDING-bottom : 5px；PADDING-top : 3px；背景-颜色：按钮面；TEXT-align : center ' INPUT STYLe=' FONT-family : Tahoma；FONT-SiZe : 8pt ' TYPE=' button ' id=' BtEnceL ' onclick='叠音流程();值='取消/DIV/DIV！- END PROGRESS DIALOG -！-BEGIN FAKE MODAL DIV-DIV ID=' DIV MODAL ' STYLE=' BACKGROUND-color :白色；滤波器：(不透明度=75);LEFT: 0px绝对位置：top : 0pxz-INDEX : 3 ' onclick='窗口。事件。cancelubble=true窗户。事件。返回值=false'/DIV！-END假模型DIV-/body/html希望本文所述对大家Java脚本语言程序设计有所帮助。