Countdown with a timer

Viewed 35

I have a problem what happens is that I am taking a type of exam, so that exam has its questions and everything is perfect, the exam has a timer, the problem is that when the page is reloaded the timer starts again, does anyone know what I can do so that the timer does not restart when the page is reloaded, that is, if the user reloads the page, the timer starts from where it left off before the user reloaded the page.

// Temporizador
function startTimer(time) {
    counterTime = setInterval(timerCount, 1000);

    function timerCount() {
        if (time <= 600) {
            let iconItem = document.querySelector(".btn-shop + p");
            iconItem.style.color = "#F7931E";
            iconItem.style.fontSize = "2.4rem";

            let icon = document.querySelector(".fa-clock");
            icon.classList.add("shake-bottom");
            icon.style = "animation-iteration-count: infinite;";
        }

        if (time <= 300) {
            let iconItem = document.querySelector(".btn-shop + p");
            iconItem.style.color = "#d52039";
            iconItem.style.fontSize = "2.4rem";

            let icon = document.querySelector(".fa-clock");
            icon.classList.add("shake-bottom");
            icon.style = "animation-iteration-count: infinite;";
            
            // let message = document.getElementById(".message");
            // message.classList.replace("d-none", "d-block")
            

        }
        

        if (time == 0) {
            // let button = document.querySelector("#nextQuestion");

            // button.innerHTML = "Entregar Examen";
            // button.href = "./dashb-final-examen.html";
            window.location.replace("./dashb-final-examen.html");
            clearInterval(counterTime);
        }

        String.prototype.toHHMMSS = function () {
            let sec_num = parseInt(this, 10);
            let hours = Math.floor(sec_num / 3600);
            let minutes = Math.floor((sec_num - hours * 3600) / 60);
            let seconds = sec_num - hours * 3600 - minutes * 60;

            if (hours < 10) {
                hours = "0" + hours;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            // console.log(hours + ':' + minutes + ':' + seconds)
            return hours + ":" + minutes + ":" + seconds;
        };

        let realTime = time.toString();
        timer.textContent = realTime.toHHMMSS();
        time--;
    }
}
startTimer(305);

window.addEventListener("beforeunload", function(e)  {
    // funciona, lo mismo que si devolviera desde window.onbeforeunload
    // if time is not over
    if (time > 0) {
        // save the time
        document.cookie = "time=" + time;
    } else {
        // delete the cookie if time is over
        document.cookie = "time=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
    }
  });


window.addEventListener("onload", function(){
    var cookie = document.cookie;
    
    // if cookie is not empty
    if (cookie != "") {            
        // get the time from the cookie
        var cookieTime = cookie.split("=")[1];            
        // if time is not over
        if (cookieTime > 0) {
            // set the time
            time = cookieTime;
        }            
    }
})
1 Answers

Try this

window.addEventListener("beforeunload", function(e) { 

          
    // if time is not over
    if (time > 0) {
        // save the time
        document.cookie = "time=" + time;
    } else {
        // delete the cookie if time is over
        document.cookie = "time=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
    }
    
};


window.onload = function() {
    
    // get the cookie
    var cookie = document.cookie;
    
    // if cookie is not empty
    if (cookie != "") {            
        // get the time from the cookie
        var cookieTime = cookie.split("=")[1];            
        // if time is not over
        if (cookieTime > 0) {
            // set the time
            time = cookieTime;
        }            
    }
    
};
Related