带LODING显示下载_loding资源-CSDN下载

需积分: 10 108 浏览量 2013-02-07 13:24:23 上传评论收藏 2KB TXT 举报

根据提供的文件信息，我们可以分析出该网页的主要功能是实现一个加载动画，并在加载完成后自动跳转到指定的URL。下面将详细解释其中涉及的关键技术点。 ### 1. 页面加载时自动跳转 #### 实现原理在`<body>`标签中通过`onLoad`属性设置了页面加载完成后的动作： ```html <body onLoad="location.href=url"> ``` 这里使用了`location.href`属性来改变当前页面的位置，从而实现页面的跳转。`url`变量在脚本中被定义为待跳转的目标地址。 #### JavaScript代码解析 ```javascript var url = 'http://www.lemongtree.net/bbs/index.asp'; ``` 这行代码定义了一个变量`url`，存储了页面加载后将要跳转的目标地址。 ### 2. 显示加载动画 #### 加载动画样式设置为了显示加载进度条，作者使用了HTML和CSS来定义进度条的样式： ```html <style></style> ``` 这里的`.proccess`类定义了一个宽度为2像素、高度为15像素、背景颜色为浅灰色的矩形块，用于表示加载进度条的一部分。 #### 动态生成进度条为了模拟加载过程中的进度变化，使用JavaScript动态生成了多个进度条元素： ```javascript document.write("<br><br><br><br><table border=0 cellspacing=1 cellpadding=0 bgcolor=#000000><tr bgcolor=#ffffff><td style='font:9pt Verdana;'>") for (i = 0; i < 200; i++) document.write("<input class=proccess>") document.write("</td></tr></table><br>") ``` 这段代码首先输出了一个表格，然后循环200次，每次向表格中添加一个类名为`proccess`的`<input>`元素。这样就形成了一条由200个矩形块组成的进度条。 #### 动态改变进度条颜色为了模拟加载进度的变化，使用了定时器函数`setInterval`来周期性地改变进度条的颜色： ```javascript var p = 0, j = 0; var c = new Array("#FF6600", "#ffffff") setInterval('proccess();', 100) function proccess() { document.forms.proccess.elements[p].style.background = c[j]; p += 1; if (p == 200) { p = 0; j = 1 - j; } } ``` 这里定义了两个颜色值`#FF6600`（橙色）和`#ffffff`（白色），并通过`setInterval`函数每隔100毫秒调用一次`proccess`函数来逐个改变进度条的颜色。当所有200个进度条都改变完颜色后，再重新开始，同时切换两种颜色的顺序。 #### 显示提示信息为了让用户知道当前正在进行加载操作，页面中还包含了以下提示信息： ```javascript document.write("<div align=center style='font-size:9pt;color:#660000;'>Loading, Please Wait!</div>") ``` 这段代码会在进度条下方显示一条文字提示信息“Loading, Please Wait!”，告知用户正在加载，请耐心等待。 ### 3. 兼容不同浏览器为了兼容不同的浏览器环境，页面还包含了以下代码： ```javascript <script>  </script> ``` 这段代码首先检查浏览器是否支持`document.layers`（即Netscape Navigator 4之前的特性），如果支持，则创建一个隐藏的层来实现跳转；如果不支持，则检查浏览器是否支持`document.all`或`document.getElementById`（IE和其他现代浏览器的特性），如果支持，则创建一个隐藏的`<iframe>`来实现跳转；如果上述两种方法都不适用，则直接使用`location.href`进行跳转。通过以上分析可以看出，此网页主要实现了加载进度显示及页面跳转的功能，并且考虑到了不同浏览器环境下的兼容性问题。

资源推荐

资源详情

资源评论