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"> </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>
