Untitled

<html>
<head>

<style>
.abc
{
	margin: 45px;
}
</style>

</head>
<body onload="click()">

	<div id="abc" class="abc" style=" height: 500px; width: 500px;  border: 1px solid black;">
	<div id="abc1" class="abc" style=" height: 400px; width: 400px;  border: 1px solid black;">
	<div id="abc2" class="abc" style=" height: 300px; width: 300px;  border: 1px solid black;">
	<div id="abc3" class="abc" style=" height: 200px; width: 200px;  border: 1px solid black;">
	<div id="abc4" class="abc" style=" height: 100px; width: 100px;  border: 1px solid black;">

	</div></div></div></div></div>

	<script>
		function click(){
 			setInterval(function(){
			//setting the colors to be displayed in the square
				var bgcolorlist=new Array("red","green", "blue", "cyan", "violet", "orange", "indigo", "Grey", "yellow");
				var a=document.getElementById('abc');
				var a1=document.getElementById('abc1');
				var a2=document.getElementById('abc2');
				var a3=document.getElementById('abc3');
				var a4=document.getElementById('abc4');
				var a5=document.getElementById('abc5');

				//random() to make colours display at random
				a.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
				a1.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
				a2.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
				a3.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
				a4.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
				a5.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
                        },1000);
                }
        </script>
</body>
</html>