.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进度条的更多相关文章

  1. 基于Blod的ajax进度条下载实现

    普通的浏览器下载 在web开发中,如果要实现下载功能,往往都是使用新开web页面或者是使用iframe的形式.实现起来其实很简单: <a target="_blank" hr ...

  2. ajax ----进度条的原理

    一.进度条的原理 新知识点:Html5中FormData,xmlHttpRequest中的upload属性,progress事件监控 xmlHttpRequest中的upload属性,实现: < ...

  3. 关于 webapi ajax进度条信息设置

    1.Web.config 设置跨域 <httpProtocol> <customHeaders> <add name="Access-Control-Allow ...

  4. jQuery ajax 标准写法及进度条绘制

    jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...

  5. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  6. 前端轻量级web进度条 – Nprogress & nanobar

    转载:http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html 前言 进度 ...

  7. 轻量级进度条 – Nprogress.js

    进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...

  8. springMVC+ajax 文件上传 带进度条

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  9. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

随机推荐

  1. SilverLight-Access:银光项目测试数据类列表

    ylbtech-SilverLight-Access:银光项目测试数据类列表 1.A, Product.cs 产品类 1.A, Product.cs 产品类返回顶部 1,/Access/Product ...

  2. nginx configure 错误记录

    1.the HTTP rewrite module requires the PCRE library. ./configure: error: the HTTP rewrite module req ...

  3. linux中seq命令用法

    NAME seq - print a sequence of numbers SYNOPSIS seq [OPTION]... LAST seq [OPTION]... FIRST LAST seq ...

  4. Ajax学习(一)——与Ajax的初次相识

        AJAX是"Asynchronous Javascript And XML"的缩写,从字面上解释是"异步JavaScript和XML"的简称. 它不是一 ...

  5. 用循环将三个DIV变成红色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jenkins构建一个go项目

    Jenkins安装   最低配置: 不少于256M内存,不低于1G磁盘,jdk版本>=8 安装jdk1.8 yum install -y java-1.8.0-openjdk wget -O / ...

  7. (十)jQuery对表单、表格的操作

    一.表单应用 1.HTML中的表单大致由三部分组成 (1).表单标签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...

  8. 30天自制操作系统(三)进入32位模式并导入C语言

    1 制作真正的IPL IPL(Initial Program Loader),启动程序装载器,但是之前并没有实质性的装载任何程序,这次作者要开始装载程序了. 虽然现在开发的操作系统啥功能也没有,作者说 ...

  9. 【Python基础】之for循环、数组字典

    一. for循环实例 1.循环字符串 Python Shell: for i in "hello": print(i) h e l l o 2.循环数组Python Shell: ...

  10. Cesium--气泡弹窗

    参考资料 首先感谢以下博主们的帮助,本人刚接触Cesium不久,无奈只能拾人牙慧了. 由于cesium没有自带的点击弹出气泡的功能,所以需要自己去开发一个这样的功能,网络上资源很多,看到基本思路都一致 ...