安装软件有进度条指示我们安装了多少了。上传文件也能告诉我们上传了多少了，那么如果后台有一个非常耗时的操作，能不能有这么一个进度条来告知我进行了多少了呢？答案是肯定的，点击查看demo
我的做法是： 后端提供一个借口，告知我完成了多少，至于到底完成了多少，这个可以在大任务运行的时候，写入日志，或者是写入数据，或者是写入交换文件，总之，能让你读到的地方，然后将这个值由后台传到前台ajax请求的地方，再更新进度条。
具体的代码如下：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>测试一个好玩的东西,用jquery和bootstarp实现一个后台更新进度条</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="用jquery和bootstarp实现一个后台更新进度条">
<meta name="author" content="">
<link href="./bootstrap.css" rel="stylesheet">
<div class="hero-unit">
<div class="progress progress-striped active">
<div class="bar" style="width:1%;"></div>
</div>
<button class="btn btn-large btn-primary">点的越快，增加的越快</button>
</div>
<script src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
total = 100;
intervalId = setInterval(function(){
$.get("/rand.php",
function(data){
$(".bar").width(Math.round(data/total*100)+"%");
if (total<data){
clearInterval(intervalId);
}
});
}, 200);
});
</script>
</body>
</html>
使用的是js的setInterval，他可以按照指定的间隔去执行一个函数，这里执行的函数则是一个ajax的请求。在执行这个周期函数前，可以通过一条ajax的请求，触发大任务的执行。
后端我通过一个将a++值写入文件的方式增加数值。
<?php
if (file_exists("./data")) {
$a = file_get_contents("./data");
} else $a = 0;
if ($a>100) {
$a = 0;
}
echo $a;
$a++;
file_put_contents("./data",$a);
从而实现了进度条不断滚动的功能。是不是很有趣呢？你也可以试试，并应用到自己的系统中去。