Last updated on May 11th, 2016 at 03:37 pm

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

Cycle background color using javascript

Using a single button we can cycle through different background colors for a webpage using javascript. This script will automatically cycle through a list of background colors on a single click.This tutorial is just a continuation or a second part for the tutorial Change webpage background color using javascript, Here we are using setInterval() and also clearInterval(). Code is displayed below.

<script language="javascript">
    function chngebg(a)
    {
	var b;
	b="b"+a
	if(a<=5)
	{
        switch(b)
        {
			case 'b1':
              document.body.bgColor = "green";
                break;

          case 'b1':
                document.body.bgColor = "red";
                break;
 
            case 'b2':
                document.body.bgColor = "blue";
                break;
 
            case 'b3':
                document.body.bgColor = "black";
                break;    
 
            case 'b4':
                document.body.bgColor = "yellow";
                break;
			default:
				document.body.bgColor = "pink"
		
        }
		}
		else
		{
		document.body.bgColor = "purple"
		clearInterval("my_inter");  
		}
		
    }
	function show(a)
{	
   var my_inter = setInterval(function() { a=parseInt(a+1); chngebg(a); }, 3000);
}
</script>
<body>
<input type="button" id="b1" onclick="show(0)" value="Change The Color Now!! Click Me!!!"/>
</body>

The above code is just a modified one of our previous tutorial. Very easy to understand and here is the DEMO

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

Leave a Reply

Your email address will not be published. Required fields are marked *