»
Tiếng AnhTiếng PhápTiếng Việt

In - 4 ô vuông - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Thủ thuật » 4 ô vuông
URL: https://www.javascriptbank.com/four-square.html

4 ô vuông © JavaScriptBank.comHiệu ứng sẽ tô màu từng ô vuông sau mỗi 5 giây, mục đích của hiệu ứng chỉ giúp bạn làm quen với việc định thời cho phương thức trong Javascript.

Phiên bản đầy đủ: jsB@nk » Thủ thuật » 4 ô vuông
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-->