Question

每次刷新页面时，我都会遇到一些麻烦，这会改变背景的颜色，但是会按顺序排列。我很擅长使用大量基本HTML，但对java / css并不算太多。我正在尝试将我的背景更改以及我正在处理的页面的一些图片，并且我已经找到了用于更新刷新的图片的代码，但我对于获得类似的结果非常困惑背景。这是我对图片的代码：

    <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">

是否有类似的东西可以让刷新后的背景更改？我想我可以让背景只是我想要的颜色的图片，但我不能将img id应用到头部。如果这是超级简单的请原谅我，很多这些东西对我来说就像是一门外语。

编辑：这是我当前使用背景颜色更改器编码，完全停止序列。

<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 image directory path and image 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();">

Answer 1

您可以使用HTML5 localStorage（如果您想保留会话，请使用sessionStorage）来保存索引：

<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";

        // Remember to JSON parse it later
        var local = localStorage.getItem('backgroundImageIndex');

        // If local is null, then no localStorage (i.e. first load)
        var currentIndex = (local === null) ? 0 : JSON.parse(local);

        // Reset to 0 if bigger than 2
        currentIndex = (currentIndex > 2) ? 0 : currentIndex;

        // Set src
        myImg.src = thePath + theImages[currentIndex];

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

<body onload="loadNextImage1();>

<img id="ImageRefresh">

Answer 2

现在使用backgroundColor的相同脚本：

<script type="text/javascript">

            function loadNextImage1() {

            //declare image directory path and image array
            var colors = ["#eee", "#123123", "red"];
            colors[0] = "#eee";
            colors[1] = "#123";
            colors[2] = "red";

            //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();">

<img id="ImageRefresh">

按顺序刷新背景会改变颜色吗？

2 个答案: