Is it possible for the background color to change in a sequence every time the page

Question

Is it possible for the background color to change in a sequence every time the page

I'm having trouble figuring out how to create a sequence that changes the background color every time the page is refreshed. I'm comfortable with basic HTML but not so much with JavaScript or CSS. I'm working on a page where I want the background to change along with some images, and I've managed to code the image sequence on refresh, but I'm struggling with achieving similar results for the background. Here's the code I have for the images:

    <script type="text/javascript">

            function loadNextImage1() {
                //get image object
                var myImg = document.getElementById('ImageRefresh');

                //declare image directory path and image array
                var thePath = "http://";
                var theImages = new Array();
                theImages[0] = "url";
                theImages[1] = "url";
                theImages[2] = "url";

                //get current cookie value
                var currentIndex = parseInt(getCookie());
                var imgPath = thePath + theImages[currentIndex];
                myImg.src = imgPath;

                //set next cookie index
                currentIndex += 1;
                if(currentIndex > (theImages.length - 1)) {
                    currentIndex = 0;
                }
                setCookie(currentIndex);
            }

            function setCookie(someint) {
                var now = new Date();
                var addDays = now.getDate() + 7
                now.setDate(addDays); // cookie expires in 7 days
                var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
                document.cookie = theString;
            }

            function getCookie() {
                var output = "0";
                if(document.cookie.length > 0) {
                    var temp = unescape(document.cookie);
                    temp = temp.split(';');
                    for(var i = 0; i < temp.length; i++) {
                        if(temp[i].indexOf('imgID') != -1) {
                            temp = temp[i].split('=');
                            output = temp.pop();
                            break;
                        }
                    }
                }
                return output;
            }
</script>

<body onload="loadNextImage1();">

<img id="ImageRefresh">

I'm hoping to find a way to make the background change on refresh as well. I thought about using a picture as the background color, but I can't assign an img id to the head. If this is a simple task, please bear with me as a lot of this is unfamiliar to me.

EDIT: Here's my current code for a background color changer that interrupts the sequence:

<script type="text/javascript>

            function loadNextImage1() {
                //get image object
                var myImg = document.getElementById('Sidebar1');

                //declare image directory path and image array
                var thePath = "http://";
                var theImages = new Array();
                theImages[0] = "URL";
                theImages[1] = "URL";
                theImages[2] = "URL";

                //get current cookie value
                var currentIndex = parseInt(getCookie());
                var imgPath = thePath + theImages[currentIndex];
                myImg.src = imgPath;

                //set next cookie index
                currentIndex += 1;
                if(currentIndex > (theImages.length - 1)) {
                    currentIndex = 0;
                }
                setCookie(currentIndex);
            }

            function setCookie(someint) {
                var now = new Date();
                var addDays = now.getDate() + 7
                now.setDate(addDays); // cookie expires in 7 days
                var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
                document.cookie = theString;
            }

            function getCookie() {
                var output = "0";
                if(document.cookie.length > 0) {
                    var temp = unescape(document.cookie);
                    temp = temp.split(';');
                    for(var i = 0; i < temp.length; i++) {
                        if(temp[i].indexOf('imgID') != -1) {
                            temp = temp[i].split('=');
                            output = temp.pop();
                            break;
                        }
                    }
                }
                return output;
            }
</script>

<script type="text/javascript>

            function loadNextImage2() {
                //get image object
                var myImg = document.getElementById('Sidebar2');

                //declare image directory path and image array
                var thePath = "https://";
                var theImages = new Array();
                theImages[0] = "URL";
                theImages[1] = "URL";
                theImages[2] = "URL";

                //get current cookie value
                var currentIndex = parseInt(getCookie());
                var imgPath = thePath + theImages[currentIndex];
                myImg.src = imgPath;

                //set next cookie index
                currentIndex += 1;
                if(currentIndex > (theImages.length - 1)) {
                    currentIndex = 0;
                }
                setCookie(currentIndex);
            }

            function setCookie(someint) {
                var now = new Date();
                var addDays = now.getDate() + 7
                now.setDate(addDays); // cookie expires in 7 days
                var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
                document.cookie = theString;
            }

            function getCookie() {
                var output = "0";
                if(document.cookie.length > 0) {
                    var temp = unescape(document.cookie);
                    temp = temp.split(';');
                    for(var i = 0; i < temp.length; i++) {
                        if(temp[i].indexOf('imgID') != -1) {
                            temp = temp[i].split('=');
                            output = temp.pop();
                            break;
                        }
                    }
                }
                return output;
            }
</script>

<script type="text/javascript>

            function changeColor() {

            //declare background colors array
            var colors = ["#00ffff", "#ff00ff", "ffff00"];
            colors[0] = "#00ffff";
            colors[1] = "#ff00ff";
            colors[2] = "#ffff00";

            //get current cookie value
            var currentIndex = parseInt(getCookie());
            var background = colors[currentIndex];

            document.body.style.backgroundColor = background;

            //set next cookie index
            currentIndex += 1;
            currentIndex %= colors.length;
            setCookie(currentIndex);
        }

        function setCookie(someint) {
            var now = new Date();
            var addDays = now.getDate() + 7
            now.setDate(addDays); // cookie expires in 7 days
            var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
            document.cookie = theString;
        }

        function getCookie() {
            var output = "0";
            if(document.cookie.length > 0) {
                var temp = unescape(document.cookie);
                temp = temp.split(';');
                for(var i = 0; i < temp.length; i++) {
                    if(temp[i].indexOf('imgID') != -1) {
                        temp = temp[i].split('=');
                        output = temp.pop();
                        break;
                    }
                }
            }
            return output;
        }

</script>

<body onload="loadNextImage1(); loadNextImage2(); changeColor();">

javascript html css

Answer 1

Answer №1

This updated script now changes the background color:

<script type="text/javascript">

            function loadNextBackground() {

            //declare array of background colors
            var bgColors = ["#eee", "#123123", "red"];

            //initialize current index as cookie value
            var currentIndex = parseInt(getCookie());
            var currentColor = bgColors[currentIndex];

            document.body.style.backgroundColor = currentColor;

            //update cookie index
            currentIndex += 1;
            currentIndex %= bgColors.length;
            setCookie(currentIndex);
        }

        function setCookie(index) {
            var expirationDate = new Date();
            var addDays = expirationDate.getDate() + 7;
            expirationDate.setDate(addDays); // cookie expires in 7 days
            var cookieString = 'bgColorIndex=' + escape(index) + ';expires=' + expirationDate.toUTCString();
            document.cookie = cookieString;
        }

        function getCookie() {
            var defaultValue = "0";
            if(document.cookie.length > 0) {
                var cookieArray = unescape(document.cookie).split(';');
                for(var i = 0; i < cookieArray.length; i++) {
                    if(cookieArray[i].indexOf('bgColorIndex') !== -1) {
                        var cookieValue = cookieArray[i].split('=');
                        defaultValue = cookieValue.pop();
                        break;
                    }
                }
            }
            return defaultValue;
        }

</script>

<body onload="loadNextBackground();">

<img id="ImageRefresh">

Answer 2

This updated script now changes the background color:

<script type="text/javascript">

            function loadNextBackground() {

            //declare array of background colors
            var bgColors = ["#eee", "#123123", "red"];

            //initialize current index as cookie value
            var currentIndex = parseInt(getCookie());
            var currentColor = bgColors[currentIndex];

            document.body.style.backgroundColor = currentColor;

            //update cookie index
            currentIndex += 1;
            currentIndex %= bgColors.length;
            setCookie(currentIndex);
        }

        function setCookie(index) {
            var expirationDate = new Date();
            var addDays = expirationDate.getDate() + 7;
            expirationDate.setDate(addDays); // cookie expires in 7 days
            var cookieString = 'bgColorIndex=' + escape(index) + ';expires=' + expirationDate.toUTCString();
            document.cookie = cookieString;
        }

        function getCookie() {
            var defaultValue = "0";
            if(document.cookie.length > 0) {
                var cookieArray = unescape(document.cookie).split(';');
                for(var i = 0; i < cookieArray.length; i++) {
                    if(cookieArray[i].indexOf('bgColorIndex') !== -1) {
                        var cookieValue = cookieArray[i].split('=');
                        defaultValue = cookieValue.pop();
                        break;
                    }
                }
            }
            return defaultValue;
        }

</script>

<body onload="loadNextBackground();">

<img id="ImageRefresh">

Answer 3

Answer №2

To store the index, you have the option of utilizing HTML5's localStorage (or sessionStorage for session persistence):

<script type="text/javascript">

    function loadNextImage() 
    {
        // Obtain the image object
        var myImage = document.getElementById('ImageRefresh');

        // Specify the image directory path and create an array for images
        var imagePath = "http://";
        var imageArray = new Array();
        imageArray[0] = "url";
        imageArray[1] = "url";
        imageArray[2] = "url";

        // Retrieve the stored index from localStorage (to be parsed later)
        var storedIndex = localStorage.getItem('backgroundImageIndex');

        // Handle cases where localStorage is empty
        var currentIndex = (storedIndex === null) ? 0 : JSON.parse(storedIndex);

        // Reset index to 0 if it exceeds the array length
        currentIndex = (currentIndex > 2) ? 0 : currentIndex;

        // Set the image source
        myImage.src = imagePath + imageArray[currentIndex];

        // Save the index to localStorage
        localStorage.setItem('backgroundImageIndex', JSON.stringify(currentIndex));
    }
</script>

<body onload="loadNextImage();>

<img id="ImageRefresh">

Answer 4

To store the index, you have the option of utilizing HTML5's localStorage (or sessionStorage for session persistence):

<script type="text/javascript">

    function loadNextImage() 
    {
        // Obtain the image object
        var myImage = document.getElementById('ImageRefresh');

        // Specify the image directory path and create an array for images
        var imagePath = "http://";
        var imageArray = new Array();
        imageArray[0] = "url";
        imageArray[1] = "url";
        imageArray[2] = "url";

        // Retrieve the stored index from localStorage (to be parsed later)
        var storedIndex = localStorage.getItem('backgroundImageIndex');

        // Handle cases where localStorage is empty
        var currentIndex = (storedIndex === null) ? 0 : JSON.parse(storedIndex);

        // Reset index to 0 if it exceeds the array length
        currentIndex = (currentIndex > 2) ? 0 : currentIndex;

        // Set the image source
        myImage.src = imagePath + imageArray[currentIndex];

        // Save the index to localStorage
        localStorage.setItem('backgroundImageIndex', JSON.stringify(currentIndex));
    }
</script>

<body onload="loadNextImage();>

<img id="ImageRefresh">

Is it possible for the background color to change in a sequence every time the page

Answer №1

Answer №2

Similar questions

The text for the Google chart is nowhere to be found

Enhance TinyMCE functionality to permit text as a primary element within <table> or <tr> tags

How can I remove a row from an MVC webgrid using an ajax call?

`A mistake occurred while building in the package.json file`

Loading complex models with Three.js

Space within a series of photographs

What is the best way to create a dropdown menu within an iframe that appears on top of all other frames?

I am facing difficulties displaying Arabic language characters on my HTML code

Is your pure function component not receiving or responding to input props correctly?

Step-by-step guide on integrating a custom JS file into an Angular component

I'm facing an issue with running npm start on my react project ever since I installed babel-cli

A more efficient method for refreshing Discord Message Embeds using a MessageComponentInteraction collector to streamline updates

What can I do to remove the hidden <p> tags that Wordpress is inserting into my HTML code?

Creating an expo apk using eas buildWould you like a tool for generating

Removing Form Fields Utilizing Javascript

Employing [style.something.px]="2" in Angular to specify the thickness of the border

The custom font fails to load on a customized Material UI theme

What is the prescribed interface or datatype for symbol type in TypeScript with JavaScript?

Implementing a button on a polygon shape within an SVG

What is the best way to pass the "getjson" capability from one function to another in a seamless manner?