如何停止在JavaScript中刷新倒数计时器

Question

`<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<h1 align="center" style="color:green">A countdown timer in jquery</h1>

<h3 style="color:#FF0000" align="center"> You will be logged out in : <span id='timer'></span> </h3>

<script>
//define your time in second
    var c=60;
    var t;
    timedCount();

    function timedCount()
    {

        var hours = parseInt( c / 3600 ) % 24;
        var minutes = parseInt( c / 60 ) % 60;
        var seconds = c % 60;

        var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);


        $('#timer').html(result);
        if(c == 0 )
        {
            //setConfirmUnload(false);
            //$("#quiz_form").submit();
            window.location="result.php";
        }
        c = c - 1;
        t = setTimeout(function()
        {
         timedCount()
        },
        1000);
    }
</script>` 

I have this script that does work fine but ,a small trouble it is causing that when i refresh the page the timer resets. I want that it does not reset on refreshing the page.

Answer 1

Check whether or not the user is already counting down (ie whether a target time is stored, and in future), if not store the target time. Then provide c as the difference between the current time and the stored target time. You can use

• Session storage, and render c directly into the webpage
• Session storage, and ask for c from the server using AJAX
• document.cookie or window.localStorage , so that server does not need to get involved.