您的位置：首页 > 编程语言 > PHP开发

php进度条

2015-06-17 08:07 531 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航