Thursday, March 5, 2009

Random Layer using javascript

Display random layer/div in javascript

<HTML>
<Head>
<Script Language="javascript">

//global var
var last_index=0;
box_len=5;

function ret_index()
{
var ran;
do{
ran=Math.floor(Math.random()*box_len);
if(ran==0)ran=box_len;
}while(ran==last_index);

last_index=ran;
return ran;
}

function show_one(){
vBox=ret_index();
for(var i=1;i<=box_len;i++){
if(vBox!=i){
obj=document.getElementById("box_0"+i);
obj.style.display="none";
}else{
obj=document.getElementById("box_0"+i);
obj.style.display="inline";
}
}
}

</Script>
<Body>
<a href="javascript:show_one();">show One</a>
<div id='box_01' style="position:absolute;left:120;width:100;height:100;border:1px solid red;text-align:center">
<br>Box1
</div>
<div id='box_02' style="position:absolute;left:240;width:100;height:100;border:1px solid red;text-align:center">
<br>Box2
</div>
<div id='box_03' style="position:absolute;left:360;width:100;height:100;border:1px solid red;text-align:center">
<br>Box3
</div>
<div id='box_04' style="position:absolute;left:480;width:100;height:100;border:1px solid red;text-align:center">
<br>Box4
</div>
<div id='box_05' style="position:absolute;left:600;width:100;height:100;border:1px solid red;text-align:center">
<br>Box5
</div>
</body>
</Html>

No comments:

Post a Comment