A quick little JavaScript to cycle through an array of hex colors. Installs an interval function to change the background color every second.
// Variables
// install an interval function update_colors() and run it every 1000 milliseconds (once a second)
var closeInterval = window.setInterval(update_colors, 1000);
// global variable to control where we are in the array of colors
var step = 0;
// this is our array of colors
var ColorCycle = [
"#838a85",
"#bbaa99",
"#c6ceb6",
"#9fb1a2",
"#748f8b"
];
Everything’s set up. There is no need for a window.onload() function because we’ve installed this as an interval function. That takes care of making sure we aren’t executing on null document objects.
function update_colors() {
// Call a utility function that changes the background color
swap_colors(step);
// step is where we hold the value of the current item in the array
step++;
// Let's not go outside the bounds of the array, please
if (step > ColorCycle.length) {
step = 0;
}
}
There we go. All that’s left is a little utility function to do the actual swapping.
function swap_colors(new_color) {
// Change the page background
document.body.style.background = ColorCycle[new_color];
// This necessary for the first time through, but it seems to be unnecessary
// for subsequent passes. I'm a little bit confused by this, but okay.
// Changing the background color of the Section object inside <body>
var section_style = document.querySelector("section");
section_style.style.background = ColorCycle[new_color];
}
So, as I mention in the comment, changing the “section” object background seems to be necessary since I’ve given it its own background definition in the style sheet. I suppose I could have just not given the section object a style, which would eliminate the need to change the background, but that’s okay, because now I know how to change an object’s background when it’s different than the body background.
Next, I will work on making the transitions between colors less jarring by writing a nice function that will blend colors.