php进度条

php进度条

效果图

 

 

 

long_process.php

<?php
for($i=1;$i<=10;$i++){
    session_start();
    $_SESSION["progress"]=$i;
    session_write_close();
    sleep(1);
}

process.php

<?php
session_start();
echo $_SESSION["progress"];

index.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://www.localhost.com/jquery.js"></script>
<style>
#container{
    position:relative;
    width:400px;
    height:30px;
    line-height:30px;    
    text-align:center;
    background:#999;
}
#progress{
    background:#399;    
    width:0;
}
#percent{
    position:absolute;    
    top:0;
    left:190px;
}
</style>
</head>
<body>
<div id="container">
<div id="progress">&nbsp;</div>
<div id="percent"></div>
</div>
</body>

<script>
$.ajax({
    url:'long_process.php',
    success:function(data){}
});

function getProgress(){
    $.ajax({
        async:false,
        url:'progress.php',
        success: function(data){
            
            var w1=(parseInt(data)*400/10)+'px';
            var w2=(parseInt(data)/10*100)+'%';
            
            $("#progress").css({width:w2});
            $("#percent").html(w2);
            if(data==10){
                clearInterval(timer);
            }
        }    
    });    
}
var timer=setInterval(function(){
    getProgress();    
},1000);

</script>
</html>

posted @ 2015-06-17 08:07  宋正河  阅读(206)  评论(0编辑  收藏  举报