简体   繁体   中英

Countdown with a timer

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;
        }            
    }
})

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM