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.