javascript实验的网页加载进度条

最新推荐文章于 2024-07-25 22:46:25 发布
最新推荐文章于 2024-07-25 22:46:25 发布
阅读量83 收藏
点赞数
分类专栏： Ajax 文章标签： JavaScript Ajax .net Microsoft ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishushan/article/details/83529100
版权

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'));
}
//-->

lishushan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bc-webplayer:一个实验
06-26
3. **自定义用户界面**：为了实现定制化的播放器界面，开发者可能会用JavaScript和CSS来创建和操纵DOM元素，展示播放、暂停按钮、进度条、音量控制等组件。 4. **响应式设计**：bc-webplayer可能采用了响应式布局，...
loadingExperiments:尝试使加载子状态起作用
05-08
考虑到标签为"JavaScript"，我们可以推断这个实验可能使用了JavaScript（可能是AngularJS、React、Vue等现代框架）来实现加载子状态。在JavaScript中，我们可以利用事件监听、异步编程（如Promise、async/await）和...
第三章 进度条实验
qq_40168905的博客
12-03 382
进度条实验 一：进度条总共10份 二：每完成一份，占10% 三：完成一份，用“”，未完成，用“…” 假设10份里面，完成了2份，占20%， “”2, 剩余"…"(10-2) a=“**”2; b="…"(10-2) c=(x/10)*100 四：进度条慢慢走的，那么应该使用时间库time import time scale=10 start=“程序开始” end=“程序结束” print(start.center(40,"=")) for x in range(scale+1): a,b="**“x,"…
AJAX进度条
lvtouyayayaya的专栏
12-15 517
用Ajax+php打造进度条，其实很简单。  readyState == 状态(0,1,2,3,4)  0:请求未初始化，还没调用open  1:请求已经建立，但还没有发送，还没调用send  2：请求已发送，并且正在处理  3：请求正在处理，通常响应中已有部分数据可调用  4：完毕  根据readystate来计算的，不是虚拟的进度，不过速度快的话可能看不到效果。
自定义加载条和nprogress加载条插件使用
qq_42580876的博客
12-04 441
自定义加载条 1、相关css （该单独写在style文件夹中，全局导入使用） #global-loading { height: 4px; width: 0; // 渐变颜色（linear-gradient） background: linear-gradient(to right,rgb(79, 156, 243), rgb(144, 188, 240),rgb(40, 138, 250)) ; animation: gorw 2s infinite forward
通过style.display来写元素的显示隐藏效果。第一次点击希望它显示竟然没有效果。需要点2次的原因
肖肖肖丽珠的博客
07-07 1191
点击按钮来显示隐藏上面的aaaaaaa。 初始状态他是隐藏的。 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <style> #div{display:none} </style> </head> <body>...
Unity2020.3 WebGL与Web通讯（html5和Vue）
08-23 3039
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Unity WebGL Player | xxx</title> <link rel="shortcu.
h实验八 javascript实验的网页加载进度条（ajax） - 副本.doc
06-09
实验八的目的是让学生深入理解AJAX（异步JavaScript和XML）的语法和功能，并能熟练运用其中的关键对象和浏览器对象的属性与方法。在实验中，主要涉及以下几个知识点： 1. **AJAX基础**：AJAX是一种在无需重新加载...
这是一个用于耳朵训练的音乐实验。目标是在切换到下一个序列之前聆听循环序列并匹配您选择的乐器上的音符_JavaScript_代码
06-16
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它允许动态内容在用户与页面交互时更新，非常适合构建此类实时反馈的应用。 1. **音乐序列处理**： 在这个项目中，核心功能是生成和播放音乐序列。这...
web交互设计网页注册源代码
11-24
本资源提供了“web交互设计课程实验”的源代码，专注于用户登录和注册功能的实现，旨在帮助学习者理解并掌握相关的设计原则和技术。 首先，我们要了解Web交互设计的基本概念。它涉及网站或应用程序的用户界面（UI）...
页面加载时显示进度条的js
03-22
NULL 博文链接：https://jaylong.iteye.com/blog/1006089
文本进度条实验
mu_zei的博客
04-19 276
import time scale=10 print("------执行开始------") for i in range(scale+1): a,b="**"*i,".."*(scale-i) c=(i/scale)*100 print("%{:^3.0f}[{}->{}]" .format(c,a,b)) time.sleep(0.1) print("------执行结束------")
.NET 相关概念
oscar999的专栏
07-25 687
NET 是一个由 Microsoft 开发和维护的广泛用于构建各种类型应用程序的开发框架。它是一个跨平台、跨语言的开发平台，提供了丰富的类库、API和开发工具，支持开发者使用多种编程语言（如C#、VB.NET、F#等）来构建应用程序。.NET 应用程序可以运行在多种操作系统上，包括Windows、macOS和Linux，并且支持从桌面应用到Web应用、移动应用、云服务、游戏和物联网（IoT）应用等多种应用类型。
.NET开源、简单、实用的数据库文档生成工具
技术杂谈，聚焦优质文章、开源项目、实用工具和学习、工作、面试心得分享。博客园推荐博客、阿里云专家博主，擅长于C#、.NET、.NET Core、Golang、TypeScript、Vue、Uni App、Angular开发。
07-24 607
今天大姚给大家分享一款.NET开源（MIT License）、免费、简单、实用的数据库文档（字典）生成工具，该工具支持CHM、Word、Excel、PDF、Html、XML、Markdown等多文档格式的导出：DBCHM。
智慧校园音视频系统整体解决方案-1PPT(24页).pptx
07-28
智慧校园整体解决方案是响应国家教育信息化政策，结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础，旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变，通过自动数据采集、智能分析和按需服务，实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通，确保系统能够满足不同用户角色的需求，并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面，构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等，以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能，增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术，实现人员和设备的智能管理，提高校园运营效率。 智慧教学部分，方案提供了智慧学习系统和精品录播教室方案，支持专业级学习硬件和智能化网络管理，促进个性化学习和教学资源的高效利用。同时，教学质量评估中心和资源应用平台的建设，旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理，通过智慧教室管理系统实现教室环境的智能控制和能效管理，打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设，将作为智慧校园的核心和入口，提供教务、一卡通、图书馆等系统的集成信息。 总体而言，智慧校园整体解决方案通过集成先进技术，不仅提升了校园的信息化水平，而且优化了教学和管理流程，为学生、教师和家长提供了更加便捷、个性化的教育体验。
基于Springboot和Vue的铁路订票管理系统源码 铁路订票管理系统代码（高分优秀毕业设计）
07-28
铁路订票管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
四足机器人 (2).pdf
最新发布
07-28
四足机器人 (2)
IT运维流程-变更管理流程设计说明书.pdf
07-28
IT运维流程-变更管理流程设计说明书.pdf
基于java的竞赛管理系统-可执行内含文档代码-可执行内含文档代码.zip
07-28
基于java的竞赛管理系统-可执行内含文档代码-可执行内含文档代码.zip
php 页面加载进度条
04-28
在PHP中实现页面加载进度条可以通过以下步骤来实现： 1. 使用JavaScript和CSS创建进度条的样式和动画效果。 2. 在PHP脚本中，通过ob_start()函数开启输出缓冲区。 3. 在PHP脚本中，使用ob_flush()和flush()函数将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值