`
liss
  • 浏览: 842752 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

javascript实验的网页加载进度条

    博客分类：
  • Ajax
JavaScriptAjax.netMicrosoft 
阅读更多

function Ajax(){
var XmlHttp = null;
var DataObject = null;//数据接收对象
var LoadingBar = null;//状态显示对象
var LoadingMax = 100;//进度条最大值
var LoadingWidth = null;//保存宽度,还原初始属性
var LoadingTimer = 10;//刷新时间
var LoadingTimerID = null;//时间ID
var FinishTimer = 10;//完成停留时间,等候进度条完成
var FinishTimerID = null;//时间ID
var HttpState = 0;
var CanFree = false;//释放
this.Create = function(free){
try{
if(free)CanFree = true;
if(navigator.appName.indexOf("Netscape")==-1){
try{
XmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}else{
XmlHttp=new XMLHttpRequest();
}
return true;
}catch(e2){
return false;
}
}
this.Send = function(url, obj1, obj2){
try{
DataObject = obj1;
LoadingBar = obj2;
if(LoadingBar){
LoadingMax = LoadingBar.offsetWidth;//保存可见宽度
LoadingWidth = LoadingBar.style.width;//可能会没有设置宽度,这时数据为空
LoadingBar.style.width = "0px";
LoadingBar.innerHTML = "0%";
LoadingBar.style.display = "";
DataObject.style.display = "none";
HttpState = 0;
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
LoadingTimerID = setInterval(this.StatusBar, LoadingTimer);
}
XmlHttp.open("GET", url, true);
XmlHttp.onreadystatechange = this.StateChange;
XmlHttp.send(null);
return true;
}catch(e){
return false;
}
}
this.StateChange = function(){
try{
if(XmlHttp.readyState)HttpState = XmlHttp.readyState;
if (XmlHttp.readyState == 4) {
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
if(LoadingBar){
LoadingBar.style.width = LoadingWidth;
LoadingBar.innerHTML = "100%";
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
FinishTimerID = setInterval(this.Finish, FinishTimer);
}else{
DataObject.innerHTML = XmlHttp.responseText;
if(CanFree)this.Destroy();
}
}

this.Finish = function(){//放到外面访问不了
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
LoadingBar.style.display = "none";
DataObject.style.display = "";
DataObject.innerHTML = XmlHttp.responseText;
if(CanFree)this.Destroy();
}

this.Destroy = function(){
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
XmlHttp = null;
}

}catch(e){}
}
this.StatusBar = function(){
try{
if(LoadingBar.offsetWidth >= LoadingMax){
LoadingBar.innerHTML = "100%";
LoadingBar.style.width = LoadingWidth;
return;//返回
}

if(LoadingBar.offsetWidth < (HttpState + 1) * Math.floor(LoadingMax / 4)){
var loading = LoadingBar.offsetWidth + Math.floor(LoadingMax / 40);//十分之一
LoadingBar.style.width = loading + "px";
var percen = Math.floor(loading / LoadingMax * 100);
LoadingBar.innerHTML = (percen>100?100:percen) + "%";
}else{
LoadingBar.style.width = (HttpState + 1) * Math.floor(LoadingMax / 4) + "px";
LoadingBar.innerHTML = Math.floor(100 / (4 - HttpState)) + "%";
}
}catch(e){}
}
this.Destroy = function(){
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
XmlHttp = null;
}
}



使用一例：

<script language="jscript.encode" src="js/ajax.js"></script>
<div style="background:#b7d2ec url(http://www.gzyd.net/lael/loading.gif) center no-repeat; height:10px; text-align:center; color:#fff; " id="status">
</div>
<div id="data"></div>
<script language="javascript">
<!--
var obj = new Ajax();
if(obj.Create(true)){
obj.Send('http://www.gzyd.net&#39;, document.getElementById('data'), document.getElementById('status'));
}
//-->

function Ajax(){
var XmlHttp = null;
var DataObject = null;//数据接收对象
var LoadingBar = null;//状态显示对象
var LoadingMax = 100;//进度条最大值
var LoadingWidth = null;//保存宽度,还原初始属性
var LoadingTimer = 10;//刷新时间
var LoadingTimerID = null;//时间ID
var FinishTimer = 10;//完成停留时间,等候进度条完成
var FinishTimerID = null;//时间ID
var HttpState = 0;
var CanFree = false;//释放
this.Create = function(free){
try{
if(free)CanFree = true;
if(navigator.appName.indexOf("Netscape")==-1){
try{
XmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}else{
XmlHttp=new XMLHttpRequest();
}
return true;
}catch(e2){
return false;
}
}
this.Send = function(url, obj1, obj2){
try{
DataObject = obj1;
LoadingBar = obj2;
if(LoadingBar){
LoadingMax = LoadingBar.offsetWidth;//保存可见宽度
LoadingWidth = LoadingBar.style.width;//可能会没有设置宽度,这时数据为空
LoadingBar.style.width = "0px";
LoadingBar.innerHTML = "0%";
LoadingBar.style.display = "";
DataObject.style.display = "none";
HttpState = 0;
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
LoadingTimerID = setInterval(this.StatusBar, LoadingTimer);
}
XmlHttp.open("GET", url, true);
XmlHttp.onreadystatechange = this.StateChange;
XmlHttp.send(null);
return true;
}catch(e){
return false;
}
}
this.StateChange = function(){
try{
if(XmlHttp.readyState)HttpState = XmlHttp.readyState;
if (XmlHttp.readyState == 4) {
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
if(LoadingBar){
LoadingBar.style.width = LoadingWidth;
LoadingBar.innerHTML = "100%";
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
FinishTimerID = setInterval(this.Finish, FinishTimer);
}else{
DataObject.innerHTML = XmlHttp.responseText;
if(CanFree)this.Destroy();
}
}

this.Finish = function(){//放到外面访问不了
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
LoadingBar.style.display = "none";
DataObject.style.display = "";
DataObject.innerHTML = XmlHttp.responseText;
if(CanFree)this.Destroy();
}

this.Destroy = function(){
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
XmlHttp = null;
}

}catch(e){}
}
this.StatusBar = function(){
try{
if(LoadingBar.offsetWidth >= LoadingMax){
LoadingBar.innerHTML = "100%";
LoadingBar.style.width = LoadingWidth;
return;//返回
}

if(LoadingBar.offsetWidth < (HttpState + 1) * Math.floor(LoadingMax / 4)){
var loading = LoadingBar.offsetWidth + Math.floor(LoadingMax / 40);//十分之一
LoadingBar.style.width = loading + "px";
var percen = Math.floor(loading / LoadingMax * 100);
LoadingBar.innerHTML = (percen>100?100:percen) + "%";
}else{
LoadingBar.style.width = (HttpState + 1) * Math.floor(LoadingMax / 4) + "px";
LoadingBar.innerHTML = Math.floor(100 / (4 - HttpState)) + "%";
}
}catch(e){}
}
this.Destroy = function(){
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
XmlHttp = null;
}
}



使用一例：

<script language="jscript.encode" src="js/ajax.js"></script>
<div style="background:#b7d2ec url(http://www.gzyd.net/lael/loading.gif) center no-repeat; height:10px; text-align:center; color:#fff; " id="status">
</div>
<div id="data"></div>
<script language="javascript">
<!--
var obj = new Ajax();
if(obj.Create(true)){
obj.Send('http://www.gzyd.net&#39;, document.getElementById('data'), document.getElementById('status'));
}
//-->

分享到：
| JSON学习
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    h实验八 javascript实验的网页加载进度条（ajax） - 副本.doc

    实验八的目的是让学生深入理解AJAX（异步JavaScript和XML）的语法和功能，并能熟练运用其中的关键对象和浏览器对象的属性与方法。在实验中，主要涉及以下几个知识点： 1. **AJAX基础**：AJAX是一种在无需重新加载...

    进度条 彩色圆球的两种运动特效ppt模板.rar

    首先，进度条是一种常见的用户界面元素，用于显示任务、数据加载或过程的完成状态。在传统的进度条中，通常采用线条或条状图形填充来表示进度。而在这个模板中，设计者引入了彩色圆球作为进度的表示，不仅视觉上更具...

    这是一个用于耳朵训练的音乐实验。目标是在切换到下一个序列之前聆听循环序列并匹配您选择的乐器上的音符_JavaScript_代码

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它允许动态内容在用户与页面交互时更新，非常适合构建此类实时反馈的应用。 1. **音乐序列处理**： 在这个项目中，核心功能是生成和播放音乐序列。这...

    jgx565621106-WangYeJinDuTiao-master.zip

    【描述】"关于进度条的实验，可以使用部分功能进行修改，欢迎使用" 暗示了这个项目包含了一些实验性的进度条实现，开发者可以参考并根据自己的需求进行修改。这可能包括不同样式、动画效果或者自定义事件的处理。...

    web交互设计网页注册源代码

    本资源提供了“web交互设计课程实验”的源代码，专注于用户登录和注册功能的实现，旨在帮助学习者理解并掌握相关的设计原则和技术。 首先，我们要了解Web交互设计的基本概念。它涉及网站或应用程序的用户界面（UI）...

    loadingExperiments:尝试使加载子状态起作用

    考虑到标签为"JavaScript"，我们可以推断这个实验可能使用了JavaScript（可能是AngularJS、React、Vue等现代框架）来实现加载子状态。在JavaScript中，我们可以利用事件监听、异步编程（如Promise、async/await）和...

    bc-webplayer:一个实验

    3. **自定义用户界面**：为了实现定制化的播放器界面，开发者可能会用JavaScript和CSS来创建和操纵DOM元素，展示播放、暂停按钮、进度条、音量控制等组件。 4. **响应式设计**：bc-webplayer可能采用了响应式布局，...

    Android Studio 实训操作题（三）WebView的用法及使用HTTP协议访问网络.docx

    - **进度条显示**：可以使用`WebView.setWebChromeClient()`和`WebChromeClient.onProgressChanged()`监听网页加载进度。 2. **HTTP协议访问网络** - **Android网络访问权限**：在AndroidManifest.xml中添加`...

    微信小程序仿网易云音乐案例

    同时，JavaScript负责动态加载数据和实现滑动效果。 3. **音乐播放**：实现歌曲播放功能，需要使用微信小程序的媒体API，包括`&lt;audio&gt;`组件，控制播放、暂停、切换歌曲等。还要考虑音量控制、播放模式（顺序、随机...

    dojo 代码 0.4

    1. **模块系统**：Dojo 使用了名为 Dojo 模块化加载器（AMD，Asynchronous Module Definition）的机制，允许开发者按需加载 JavaScript 文件，提高了页面加载速度和代码组织性。 2. **DOM 操作**：Dojo 提供了方便...

    Lab15_WebView

    2. **加载网页**：在Java代码中找到`WebView`并设置其属性，如加载网页的URL。 ```java WebView webView = (WebView) findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); // 启用...

    DOJO开发指南（结合DOJO中国及网上的资料整理的结果）

    - **打包工具**：用于优化JavaScript代码，生成最小化的部署包，提高加载速度。 - **测试工具**：支持命令行单元测试，确保代码质量。 ### 2. DOJO的体系架构 DOJO的体系结构分为四个层次： - **包系统**：基础层...

    angular-circular-progress:使用angularjs和D3的循环进度指示器

    这是对AngularJS，CoffeeScript和D3.js的实验。 它创建一个指令，该指令采用两个actual值和expected值，并绘制一个圆形进度条。 演示： ： 安装和运行 签出项目，然后进入文件夹并运行 npm install 安装所有软件包...

    Firefox火狐浏览器官方80.0b3-win32版本exe在线安装包

    1. **新特性**：Firefox 80.0b3是beta测试版，意味着它包含了最新的开发者实验性功能，如WebRender图形渲染技术，旨在提高页面加载速度和视觉质量。 2. **安全性**：火狐浏览器始终注重用户隐私，80.0b3版本继续...

    cytofviz:CyTOF数据上的简单PCA和RSKM聚类

    这是PCA和健壮的稀疏K均值（RSKM）的快速javascript实现。 实际上，这不一定是CyTOF数据，而是任何高维数据集。 请记住，一切都在浏览器中完成，因此选择一个大文件可能需要一些时间来进行分析。 用法 您的数据应为...

    jquery页面demo

    6. **进度条（Progress Bar）**: 显示任务或加载过程的进度，提供可视化反馈。 7. **可折叠（Accordion）**和** tabs （选项卡）**: 用于组织和展示大量内容，提高页面空间利用。 **学习与实践** 对于初学者，...

    dojo api最好资料

    Dojo是核心功能包，Dijit包含所有Widget组件，而DojoX则用于实验性和扩展功能。 1. **Dojo** - `dojo.io`：提供了多种网络请求方法，如脚本注入和IFrame。 - `dojo.dnd`：支持拖放功能。 - `dojo.string`：提供...

    JQuery UI 1.8.7

    - **进度条（Progressbar）**：显示任务或加载过程的进度。 - **日期选择器（Datepicker）**：为输入字段添加日历选择功能。 - **自动补全（Autocomplete）**：根据用户输入提供下拉建议，常见于搜索框。 - **...

    DOJO-API中文参考手册附加注解实例

    - **应用程序支持库与Widget系统**：这是开发者日常接触最多的部分，包括了大量的应用程序支持API和Widget组件，如IO包支持Ajax调用，Widget系统提供了丰富的UI元素，如按钮、进度条、树状图等，基于MVC模式设计，...

    DOJO API 中文参考手册，附加注解实例(精心重新排版DOC文档)

    Dojo是一个JavaScript库，它提供了大量的功能，以支持Web应用的开发，尤其是在Ajax和用户界面（UI）设计方面。 Dojo的核心结构分为多个层次，最底层是包系统，它模仿了Java的包概念，使得API组织有序，便于开发者...

Magicbox
Global site tag (gtag.js) - Google Analytics