利用jquery和bootstarp做一个好看的进度条

在 2013 年 6 月 23 日2018 年 10 月 22 日上张贴由龙安_任天兵发表回复

安装软件有进度条指示我们安装了多少了。上传文件也能告诉我们上传了多少了，那么如果后台有一个非常耗时的操作，能不能有这么一个进度条来告知我进行了多少了呢？答案是肯定的，点击查看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);

从而实现了进度条不断滚动的功能。是不是很有趣呢？你也可以试试，并应用到自己的系统中去。

发表回复取消回复