HTML实现背景颜色每三秒转换一下,javascript css3每2秒更改背景颜色

var arrColor = ["#45c1bf", "#f0593e", "#aeacd4", "#bdd630", "#4479bd", "#f5b11e"];

var footer = document.getElementById("footer");

var header = document.getElementById("header");

//helper function - get dark or lighter color

function LightenDarkenColor(col, amt) {

var usePound = false;

if (col[0] == "#") {

col = col.slice(1);

usePound = true;

}

var num = parseInt(col, 16);

var r = (num >> 16) + amt;

if (r > 255) r = 255;

else if (r < 0) r = 0;

var b = ((num >> 8) & 0x00FF) + amt;

if (b > 255) b = 255;

else if (b < 0) b = 0;

var g = (num & 0x0000FF) + amt;

if (g > 255) g = 255;

else if (g < 0) g = 0;

return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);

}

//random new color

function GetNewColor() {

var index = Math.floor((Math.random() * 5) + 1);

return arrColor[index];

}

// set new color

function SetNewColor(color) {

document.body.style.background = color;

var NewColor = LightenDarkenColor(color, -20);

footer.style.backgroundColor = NewColor;

header.style.backgroundColor = NewColor;

//footer.style.opacity = 1.2;

}

// on document load function start

(function() {

var colorSelected = GetNewColor();

SetNewColor(colorSelected);

})();

//change color timer

window.setInterval(function() {

var colorSelected = GetNewColor();

SetNewColor(colorSelected);

}, 2000);

* {

margin: 0;

padding: 0;

}

body {

background: #bdd630;

transition: background-color 0.5s ease;

color: #fff;

}

#header {

background: #000;

height: 40px;

text-align: center;

}

#content {

/* Now, to activate scrollbars

\t \t and compensate #footer height: */

padding-bottom: 40px;

}

#footer {

background: #000;

position: fixed;

bottom: 0px;

width: 100%;

/* cause of fixed pos */

height: 40px;

text-align: center;

}

header

content here

footer