ajax php 进度条
ajax php 进度条
wankaiming 发表于7年前
ajax php 进度条
  • 发表于 7年前
  • 阅读 754
  • 收藏 2
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

1.客户端

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Progress Bar</title>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'red';
var span_id = "block";
var clear = "&nbsp;&nbsp;&nbsp;"
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function go() {
createXMLHttpRequest();
checkDiv();
var url = "jdt.php?task=create";
var button = document.getElementById("go");
button.disabled = true;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
}
function goCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var ff=xmlHttp.responseText;
eval(ff);
var counter=arr[0];
setTimeout("pollServer("+counter+")", 2000);
}
}
}
function pollServer(counter) {
createXMLHttpRequest();
var url = "jdt.php?task=poll&counter=" + counter;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function pollCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var ff=xmlHttp.responseText;
eval(ff);
var percent_complete=arr[1];
var index = processResult(percent_complete);
for (var i = 1; i <= index; i++) {
var elem = document.getElementById("block" + i);
elem.innerHTML = clear;
elem.style.backgroundColor = bar_color;
var next_cell = i + 1;
if (next_cell > index && next_cell <= 9) {
document.getElementById("block" + next_cell).innerHTML = percent_complete + "%";
}
}
if (index < 9) {
var ff=xmlHttp.responseText;
eval(ff);
var counter=arr[0];
setTimeout("pollServer("+counter+")", 2000);
} else {
document.getElementById("complete").innerHTML = "Complete!";
document.getElementById("go").disabled = false;
}
}
}
}
function processResult(percent_complete) {
var ind;
if (percent_complete.length == 1) {
ind = 1;
} else if (percent_complete.length == 2) {
ind = percent_complete.substring(0, 1);
} else {
ind = 9;
}
return ind;
}
function checkDiv() {
var progress_bar = document.getElementById("progressBar");
if (progress_bar.style.visibility == "visible") {
clearBar();
document.getElementById("complete").innerHTML = "";
} else {
progress_bar.style.visibility = "visible"
}
}
function clearBar() {
for (var i = 1; i < 10; i++) {
var elem = document.getElementById("block" + i);
elem.innerHTML = clear;
elem.style.backgroundColor = "white";
}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1>
Launch long-running process:
<input type="button" value="运行" id="go" onClick="go();"/>
<p>
<table align="center">
<tbody>
<tr><td>
<div id="progressBar"
style="padding:2px;border:solid black 2px;visibility:hidden">
<span id="block1">&nbsp;&nbsp;&nbsp;</span>
<span id="block2">&nbsp;&nbsp;&nbsp;</span>
<span id="block3">&nbsp;&nbsp;&nbsp;</span>
<span id="block4">&nbsp;&nbsp;&nbsp;</span>
<span id="block5">&nbsp;&nbsp;&nbsp;</span>
<span id="block6">&nbsp;&nbsp;&nbsp;</span>
<span id="block7">&nbsp;&nbsp;&nbsp;</span>
<span id="block8">&nbsp;&nbsp;&nbsp;</span>
<span id="block9">&nbsp;&nbsp;&nbsp;</span>
</div>
</td></tr>
<tr><td align="center" id="complete"></td></tr>
</tbody>
</table>
</body>
</html>
2.服务器端

<?php
     $task=$_GET['task'];
     $percent=0;
     if($task=="create"){
          $res=1;
          $counter=1;
     }else{
          $counter=$_GET['counter'];
          switch($counter){
               case 1: $percent = "10"; break;
               case 2: $percent = "23"; break;
               case 3: $percent = "35"; break;
               case 4: $percent = "51"; break;
               case 5: $percent = "64"; break;
               case 6: $percent = "73"; break;
               case 7: $percent = "89"; break;
               case 8: $percent = "100"; break;
          }
          $counter++;
     }
     $nn="var arr=['".$counter."','".$percent."']";
     echo $nn;
?>

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
wankaiming
粉丝 71
博文 225
码字总数 59203
×
wankaiming
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: