All geek questions in one place

Stop page refresh - save page data after page refresh

I am using the following code in my html file. I want to change the image after a time interval, it works successfully, but when I refresh the page, it launches the start page. what i want is the same image uploaded etc etc !!

Can anybody help me?

<head>
    <style>
        #wss {
            opacity: 0;
            webkit-transition:opacity 1.0s linear 0s;
            transition:opacity 1.0s linear 0s;
        }
    </style>
    <script>
        var wss_i = 0;
        var wss_array = ['<img src="img/russia.jpg"> </img>', '<img src="img/germany.jpg"> </img>', '<img src="img/france.jpg"> </img>'];

        function wssNext() {
            wss_i++;
            wss_elem.style.opacity = 0;
            if (wss_i > (wss_array.length - 1)) {
                wss_i = 0;
            }

            setTimeout('wssSlide()', 1000);
        }

        function wssSlide() {
            wss_elem.innerHTML = wss_array[wss_i];
            wss_elem.style.opacity = 1;
            setTimeout('wssNext()', 9000);
        }
    </script>
</head>
<body>
     <h1>My dog is <span id="wss"></span> </h1>

    <script>
        wss_elem = document.getElementById("wss");

        wssSlide();
    </script>
</body>
+4
source share
1 answer

jsFiddle Demo

Description:

, cookie, cookie.

HTML

<h1>My dog is <span id="wss"></span></h1>

CSS

#wss {
    opacity: 0;
    webkit-transition:opacity 1.0s linear 0s;
    transition:opacity 1.0s linear 0s;
}

JS

//Global Variables
var wss_i=0;
var wss_array= ['<img src="http://placehold.it/350x150" />','<img src="http://placehold.it/350x250" />','<img src="http://placehold.it/350x100" />'];

//Cookie stuff
//Gets the cookie by the name passed, returns null if there isn't a cookie yet
function getCookie(c_name) {
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1) {
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1) {
        c_value = null;
    } else {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1) {
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start, c_end));
    }
    return c_value;
}

//Sets a cookie with the name with the value and an expiration number of days
function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}
//End Cookie Code

//Your code
function wssSlide(){
    wss_elem.innerHTML = wss_array[wss_i];
    wss_elem.style.opacity = 1;
    setTimeout('wssNext()', 9000);
}

function wssNext() {
    wss_i++;
    wss_elem.style.opacity = 0;
    setCookie('image', wss_i, 365);
    if(wss_i > (wss_array.length - 1)) {
        wss_i = 0;
    }
    setTimeout('wssSlide()', 1000) ; 
}
//End Your Code

//On window.onload, this occurs when the page finishes loading
window.onload=function () {  
    //store your wss_elem into the global variable
    wss_elem = document.getElementById("wss");
    //if there is a cookie for this domain with name image get the value
    if(getCookie('image') != null) {
        //set global variable wss_i to our cookie value
        wss_i = getCookie('image');
    }

    //start the slide show
    wssSlide();
}
+1

Source: https://habr.com/ru/post/1534957/

More articles:


All Articles