How To Change Background Color Every Seconds in JavaScript

In this tutorial, I am going to show you a very cool thing you can do with JavaScript. All of us know about the background color of a webpage. We can change the background color as well. But have you ever thought of changing this background color with JavaScript? I think most of us can do this, But here you gonna learn how to change background color every seconds in JavaScript automatically with random color each time.

Before going to this tutorial I would like to recommend you to read Generate random hex CSS color code in JavaScript

Steps to be followed:

  1. Create a random hex color with JavaScript
  2. Use the random color as background color with JavaScript
  3. Finally, Change this color with the setInterval method with a particular Interval period

Don’t worry you will get to learn all of these, one by one.

Generate a random hex color:

 var randomColor = Math.floor(Math.random()*16777215).toString(16);

This will create a random number in between 0 to 16777215 and toString method is used to convert the random number to hex.

We need hex here because we are going to use hex color code. ( eg, #ffffff )



 document.body.style.backgroundColor = "#"+randomColor;

Now this line will change the background color to a random color.

Now we just need to use the setInterval method to change the background color automatically in every n second.

Change background color every seconds in JavaScript with a random hex color

setInterval(
function () {
  var randomColor = Math.floor(Math.random()*16777215).toString(16);
  document.body.style.backgroundColor = "#"+randomColor;
},1000);

Here I have used 1000 milliseconds because I want to change the background color in every 1 second. You can use as per your need. ( 1 second is equal to 1000 milliseconds )

To know more about setInterval Run your JavaScript code every n seconds using setInterval() method

How to stop JavaScript setInterval() after a certain time period?

Here is the full code, You can test it on your browser.

<!DOCTYPE html>
<html>
<head>
  <title>Change bg color every 1 seconds</title>
</head>
<body>
<h1>Background Color is being changed every 1 seconds</h1>
<script>
setInterval(
function () {
  var randomColor = Math.floor(Math.random()*16777215).toString(16);
  document.body.style.backgroundColor = "#"+randomColor;
},1000);
</script>
</body>
</html>

You may also read,

How to stop JavaScript setInterval() after a certain time period?

 

2 responses to “How To Change Background Color Every Seconds in JavaScript”

  1. Malith says:

    This could be a performance killer for your page.

    • Saruque Ahamed Mollick says:

      Yeah, you are right. This is just a tutorial. A task you can do with JS. This is not suggested to use for a live website. (especially if you are maintaining a good SEO )

Leave a Reply

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