滚动条javascript

最新推荐文章于 2022-12-07 17:32:22 发布

qinglang1987

最新推荐文章于 2022-12-07 17:32:22 发布

阅读量1.3k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wangxw8746/article/details/8994134

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<script type="text/javascript">
var barHandler=null;
function startBar(){
	clearWaiting();
	document.all.waitingTB.style.display='';
	runBar(0);
}
function clearWaiting(){
	with (document.all.waitingTB.rows[2]){
		for (var i=0;i<cells.length;i++){
			cells[i].style.background='white';
		}
	}
}
function runBar(val){
	var len=document.all.waitingTB.rows[2].cells.length;
	if (val<len-2){
		document.all.waitingTB.rows[2].cells[val+1].style.background='navy';
	}else if(val==len-2){
		clearWaiting();
	}
	if ((++val)>(len-2)){
		val=0;
	}
	if (barHandler!=null){
		clearTimeout(barHandler);
	}
	barHandler=setTimeout('runBar('+val+')',500);
}
function doQuery1(){
	startBar();
}
function doQuery2(){
	with (document.all.waiting.rows[0]){
		for (var i=0;i<cells.length;i++){
			cells[i].style.background='white';
		}
	}
	document.all.waiting.style.display='';
	var len=document.all.waiting.rows[0].cells.length;
	run(0);
}
function run(val){
	var len=document.all.waiting.rows[0].cells.length;
	if (val<len){
		document.all.waiting.rows[0].cells[val].style.background='red';
	}else if(val==len){
		with (document.all.waiting.rows[0]){
			for (var i=0;i<cells.length;i++){
				cells[i].style.background='white';
			}
		}
	}
	if ((++val)>(len)){
		val=0;
	}
	if (barHandler!=null){
		clearTimeout(barHandler);
	}
	barHandler=setTimeout('run('+val+')',500);
}
</script>
<body>
	<table style="width:90%;align:center;margin-left:15px;">
		<tr><td><input type="button" value="查看滚动条1"  οnclick="doQuery1()"/>
				<input type="button" value="查看滚动条2"  οnclick="doQuery2()"/>
		</td></tr>
	</table>
	<table id="coverDiv" align="center" >
		<tr>
		<td align="center" valign="middle">
			<table id="waitingTB" cellspacing="2" cellpadding="2" style="font-size:13px;color:navy;border:3px double navy;background:white;display:none;">
				<tr><td colspan="22"> </td></tr>
				<tr><td align="center" colspan="22">正在查询，请稍候...</td></tr>
				<tr>
					<td> </td>
					<td> </td><td> </td><td> </td><td> </td><td> </td>
					<td> </td><td> </td><td> </td><td> </td><td> </td>
					<td> </td><td> </td><td> </td><td> </td><td> </td>
					<td> </td><td> </td><td> </td><td> </td><td> </td>
					<td> </td>
				</tr>
				<tr><td colspan="22"> </td></tr>
			</table>
		</td>
		</tr>
	</table>
	<table id="coverDiv" align="center" >
		<tr>
		<td align="center" valign="middle">
			<table id="waiting" cellspacing="2" cellpadding="2" style="font-size:13px;color:navy;border:3px double navy;background:white;display:none;">
				<tr>
					<td> </td>
					<td> </td><td> </td><td> </td><td> </td><td> </td>
					<td> </td><td> </td><td> </td><td> </td><td> </td>
					<td> </td><td> </td><td> </td><td> </td><td> </td>
					<td> </td><td> </td><td> </td><td> </td><td> </td>
					<td> </td>
				</tr>
			</table>
		</td>
		</tr>
	</table>	
</body>
</html>