make HTML background always changing

Issue

What do I mean by 'Always changing'? Well, for example, the Windows 8 installing screen, you see a text at the middle that says:'You can get new apps from the store', and the background are changing from red to orange to yellow to green to cyan to blue to purple then to red. I mean, how do I do that to my HTML background with JavaScript?

Solution

The most simplest, effective and shortest amount of code is to do this using some CSS and JS

CSS:

#myDiv {
    transition: background-color 2s;
}

Then you can set some colors in an array and call them when you need, or ever so often, or use the below function to generate random colors.

JS:

function randomColor() {
    return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6)
}

Below is a working implementation that changes the color every 2 seconds.

function randomColor() {
    return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6)
}

function setColor(){
    document.getElementById('myDiv').style.backgroundColor = randomColor();
    setTimeout(setColor, 2000);
}

setColor();

#myDiv {
    height: 150px;
    transition: background-color 2s;
}

<div id="myDiv"></div>

Answered By - Jesse