前臺自動更新進度條1

時間 2019-12-19

標籤前臺自動更新進度简体版

原文原文鏈接

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>後臺 test</title>
<style type="text/css">
body{
font-size:12px;
font-family:"Verdana","宋體","Arial";
color:#222;
text-decoration:none;
margin:8px;
}
#process1{
width:500px;
height:20px;
border:1px solid #333;
background-color:#CCCCCC;
}
#process2{
width:1px;
height:20px;
text-align:center;
background-color:#33FF00;
}
</style>
</head>
<body>
<div id="process1"><div id="process2"></div></div>
<div id='show'></div>
<script type="text/javascript">
//建立XMLHttpRequest
var xmlhttp;
try{
xmlhttp = new XMLHttpRequest();
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlhttp = null;
alert("您的瀏覽器不支持XMLHTTP，沒法完成此操做！");
}
}
}
//利用AJAX的無刷新調用
function subhtml(id){
xmlhttp.open("GET", "1.asp?id="+id+"&rnd="+Math.random(), false);
xmlhttp.setRequestHeader("Content-Type", "text/html; charset=gb2312");
xmlhttp.send(null);
var strText="";
if(xmlhttp.status==200){
strText = xmlhttp.responseText;
}
return strText;
}
//設置最小id和最大id
var idmin=2;
var idmax=11;
var isrun=false;
var myi=idmin;
//定時器
var intervalId =setInterval(showfun,500);
function showfun(){
if(isrun) return false;
isrun=true;
var res=subhtml(myi);
var para=document.createElement("div");
para.innerHTML = res;
document.getElementById("show").appendChild(para);
document.getElementById('process2').innerText=(100*(myi-idmin+1)/(idmax-idmin+1)).toFixed(2)+"%";
document.getElementById('process2').style.width=500*((myi-idmin+1)/(idmax-idmin+1))+"px";
myi++;
if(myi>idmax) window.clearInterval(intervalId);
isrun=false;
}
</script>
</body></html>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。