»
EnglishFrenchVietnamese

Print - Four Square - JavaScriptBank.com

Full version: jsB@nk » Snippet » Four Square
URL: https://www.javascriptbank.com/four-square.html

Four Square © JavaScriptBank.comAfter every 5 seconds the squares will be get filled with color one by one... Please wait upto 20 seconds.

Full version: jsB@nk » Snippet » Four Square
URL: https://www.javascriptbank.com/four-square.html



JavaScript
<SCRIPT LANGUAGE="JavaScript"><!--var x=1,q,y=1function start(){document.F.B.value="  "+x+" Seconds... "x++if(x==6)B1.style.background="red"if(x==11)B2.style.background="green"if(x==16)B3.style.background="blue"if(x==21)B4.style.background="yellow"q=setTimeout("start()",1000)if(x>20){clearTimeout(q)}}function one(){alert("This script needs five seconds more to start functioning .... Please be patient..")T()}function T(){y++q=setTimeout("T()",1000)if(y>5){alert("Now the script starts")clearTimeout(q)start()}}//--></SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<BODY onLoad="one()"><div style="width: 220px"><DIV ID="B1" style="width: 100px; height: 100px; background-color: yellow; float: left;">ONE</div><DIV ID="B2" style="width: 100px; height: 100px; background-color: silver; float: left;">TWO</div><DIV ID="B3" style="width: 100px; height: 100px; background-color: silver; float: left;">THREE</div><DIV ID="B4" style="width: 100px; height: 100px; background-color: silver; float: left;">FOUR</div><DIV ID="O"></div><form name="F"><font color=#3366FF size=+2>TIMER:</font><BR><input type="button" name="B" value="       "><BR>After every 5 seconds the squares will be get filled<BR>with color one by one... Please wait upto 20 seconds.....</form></div></BODY><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->