Last updated on May 11th, 2016 at 03:37 pm
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