スクロールバーjavascript
4666 ワード
<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" onclick="doQuery1()"/>
<input type="button" value=" 2" onclick="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>