<html>
<head>
<title>刷新页面的局部内容</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<script language="javascript">
function autoFlush(){
// 发送异步请求，返回统计数据，这里js模拟几个数据
var arr=[parseInt(Math.random()*10),parseInt(Math.random()*20),
parseInt(Math.random()*30),parseInt(Math.random()*40),
parseInt(Math.random()*50),parseInt(Math.random()*60)]
for(var i=0;i<arr.length;i++){
//用相应的统计数据更新统计图片的状态
document.getElementById("bar"+i).height = arr[i];
}
}
//每隔一秒就执行一次autoFlush方法
var inter= setInterval("autoFlush();",1000);
function stop()
{
clearInterval(inter);
}
</script>
<body>
<TABLE border="0" bgcolor="#c0c0c0" width="360px">
<TR>
<TD colspan="6" align="center"><h2>指标动态统计图</h2></TD>
</TR>
<TR height="100" align="center" valign="bottom">
<TD><img id="bar0" src="images/bar0.gif" width="20"></TD>
<TD><img id="bar1" src="images/bar1.gif" width="20"></TD>
<TD><img id="bar2" src="images/bar2.gif" width="20"></TD>
<TD><img id="bar3" src="images/bar3.gif" width="20"></TD>
<TD><img id="bar4" src="images/bar4.gif" width="20"></TD>
<TD><img id="bar5" src="images/bar5.gif" width="20"></TD>
</TR>
<TR height="20" align="center">
<TD>指标一</TD>
<TD>指标二</TD>
<TD>指标三</TD>
<TD>指标四</TD>
<TD>指标五</TD>
<TD>指标六</TD>
</TR>
</TABLE>
<input type='button' onclick='stop()' value='stop'>
</body>
</html>
显示效果
