【php开源代码栏目提醒】:网学会员为广大网友收集整理了,17.3-1.php,希望对大家有所帮助!
<?php
header('Content-type: text/html;charset=GB2312');
header("cache-control:no-cache,must-revalidate");
?>
<html>
<head>
<title>Ajax进度条</title>
<script type="text/javascript">
var xmlHttp; //声明xmlHttpRequest对象
var key;
var bar_color='6C8ACC'; //进度条颜色
var span_id='block';
var clear=" "
var percent_complete;
function createXMLHttpRequest(){//创建xmlHttpRequest对象
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function go(){ //执行方法
createXMLHttpRequest();
checkDiv();
var url = "17.3-2.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){
setTimeout("pollServer()",2000); //设置更新时间
}
}
}
function pollServer(){//刷新,重新发送
createXMLHttpRequest();
var url = "17.3-2.php?task=poll";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function pollCallback(){//回调方法
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200){ //完成百分比
percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
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){
setTimeout("pollServer()",2000);
}else{
document.getElementById("complete").inner
HTML = "完成";
document.getElementById("go").disabled = false;
}
}
}
}
function processResult(){//解析结果
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 bgcolor="#ffffff" style="margin-top:0; font-size:12px">
<center>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td background="../image/headerbg.jpg">
<img src="../image/Header.jpg">
</td>
</tr>
</table>
<fieldset>
<legend>Ajax进度条示例</legend>
<div align="left">
运行进度条:<input type="button" id="go" value="运行" onclick="go()"/></div>
<p></p>
<table align="center">
<tbody>
<tr><td>
<div id="progressBar" style="padding:2px;border:solid black 2px;visibility?hidden">
<span id="block1"> </span>
<span id="block2"> </span>
<span id="block3"> </span>
<span id="block4"> </span>
<span id="block5"> </span>
<span id="block6"> </span>
<span id="block7"> </span>
<span id="block8"> </span>
<span id="block9"> </span>
</div></td>
</tr>
<tr><td align="center" id="complete"></td> </tr>
</tbody>
</table>
</fieldset>
<table width="100%" style="font-size:12px;border-top-style:solid;border-bottom-style:none;border-right-style:none;border-left-style:none;" cellspacing="0" cellpadding="4" align="center">
<tr>
<td> <div align="center">
IT在中国电脑
学习网!@2007</br>
公司地址:郑州市二七路200号金博大D座2708室</br>
电话:66202195
电子邮件:<A HREF='tangxiaoyang@yeah.net'></A> itzcn@126.com
</div></td>
</tr>
</table>
</body>
</html>