ajax进度条
.graph { width: 400px; height: 25px; border: 1px solid #f8b3d0; }
.bar { background-color: #ffe7f4; display: block; float: left; height: 100%; text-align: center; }
<div class="fz">
<div class="graph" id="graph">
<em id="bar" class="bar"></em>
</div>
<input type="button" value="加载" id="btn">
<em id="mes"></em>
</div>
$("#btn").bind("click", function () {
startLoading();
})
var xmlHttp;
var percent;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startLoading() {
createXMLHttpRequest();
var url = "data.txt";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("sendData()", 2000);
}
}
};
xmlHttp.send(null);
}
function sendData() {
createXMLHttpRequest();
var url = "data.txt";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
percent = parseInt(xmlHttp.responseText);
refreshBar(percent);
if (percent < 100) {
setTimeout("sendData()", 2000);
}
else {
$("#mes").html("加载完毕");
//隐藏操作
}
}
}
}
xmlHttp.send(null);
}
//更新进度条
function refreshBar(per) {
$("#bar").width(per + "%");
}
根目录下新建data.txt 。内容输入20
每2分钟请求一次data.txt。当data.txt的内容变为100时
ajax进度条的更多相关文章
- 基于Blod的ajax进度条下载实现
普通的浏览器下载 在web开发中,如果要实现下载功能,往往都是使用新开web页面或者是使用iframe的形式.实现起来其实很简单: <a target="_blank" hr ...
- ajax ----进度条的原理
一.进度条的原理 新知识点:Html5中FormData,xmlHttpRequest中的upload属性,progress事件监控 xmlHttpRequest中的upload属性,实现: < ...
- 关于 webapi ajax进度条信息设置
1.Web.config 设置跨域 <httpProtocol> <customHeaders> <add name="Access-Control-Allow ...
- jQuery ajax 标准写法及进度条绘制
jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- 前端轻量级web进度条 – Nprogress & nanobar
转载:http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html 前言 进度 ...
- 轻量级进度条 – Nprogress.js
进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...
- springMVC+ajax 文件上传 带进度条
前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
随机推荐
- (原创)lightgbm 一些错误情况处理
1.做多分类问题时候(mutticlass),如果遇到 lightgbm.basic.LightGBMError: b'Number of classes should be specified an ...
- DbVisualizer9.0.6破解版下载、破解方法以及补丁
DbVisualizer破解方法如下:第一步:把下载的dbvis.puk文件,替换掉安装目录“D:\Program Files\DbVisualizer-6.0.12\lib”下dbvis.jar里面 ...
- Node.js自动化测试及大规模性能测试技术实现(Java&Node.JS)
后续计划: 改进1:性能测试Tool由Client端设计成Server端,支持分布式中控部署 改进2:SocketTestFramework集成WebSocket协议 改进3:完善Data Analy ...
- 关于Blind XXE
关于Blind XXE 关于XXE,很早之前内部做过分享,个人觉得漏洞本身没太多的玩点,比较有意思主要在于:不同语言处理URI的多元化和不同XML解析器在解析XML的一些特性. 在科普Blind XX ...
- Java Swing界面编程(25)---事件处理:鼠标事件及监听处理
假设想对一个鼠标的操作进行监听,假设鼠标按下.松开等.则能够使用MouseListener接口. package com.beyole.util; import java.awt.event.Mous ...
- 【基础算法】排序-复杂排序之二(找出第K大的数)
切割的思想是高速排序最精髓的地方.每一次切割出来的元素K一个排在第K位,所以利用这样的思想我们至少知道3点 1. 被切割出来的元素K最后一定排在第K位. 2. 在K左边的元素一定比K小或者相等. 3. ...
- Hdu3787
<span style="color:#330099;">/* H - A+B Time Limit:1000MS Memory Limit:32768KB 64bit ...
- cocos2dx中使用iconv转码(win32,iOS,Android)
首先贴下环境:Win7 64, NDK r8e, libiconv-1.14, cygwin 一 Win32环境配置 Cocos2D-X自带有win32上的iconv库.仅仅须要配置一下就可以使用. ...
- Python模拟登录12306
#!/usr/bin/python # -*- coding: utf-8 -*- import re; import sys; import cookielib; import urllib; im ...
- 扒一扒P2P风控的底牌(转)
互联网金融,这里面水就太深了,能当理财买的一般有两类,一个是货币基金,比如余额宝,这个大家已经十分清楚了,没什么风险, 但问题就是收益越来越低.实在是不过瘾了.而另外一种就是P2P理财了,收益很高,也 ...