CODEWITHSUNDEEP
javascriptphpjquerytimer
Dharmendra vadher
Dharmendra vadher

Reputation: 59

Set countdown/timer to continue after reset or do not reset after refreshing the page

I'm trying to get a countdown / timer which continues after refreshing the page without restarting from beginning. I have used JavaScript but it resets when reloading the page.

var timer2 = "1:30";
$('.countdown').html(timer2);

var interval = setInterval(function() {

var timer = timer2.split(':');
//by parsing integer, I avoid all extra string processing
var minutes = parseInt(timer[0], 10);
var seconds = parseInt(timer[1], 10);
--seconds;
minutes = (seconds < 0) ? --minutes : minutes;
if (minutes < 0){
    clearInterval(interval);
    $('input[name=ansSubmit]').trigger("click");
}else{
    seconds = (seconds < 0) ? 59 : seconds;
    seconds = (seconds < 10) ? '0' + seconds : seconds;
    //minutes = (minutes < 10) ?  minutes : minutes;
    $('.countdown').html(minutes + ':' + seconds);
    timer2 = minutes + ':' + seconds;
}
}, 1000);

The timer continues until the user clicks on submit, but is it possible to resume it automatically with PHP or JavaScript if user reloads the page?

Upvotes: 1

Views: 3524

Answers (2)

Jason Swan
Jason Swan

Reputation: 109

The only way I can think of setting the $_SESSION variable of time left, would be to use an ajax call inside your javascript every second or so, that calls a php script with a get variable in the filepath. This php script would set a session variable, and your timer page would check if something like $_SESSION['timeLeft'] was set, and echo out a js variable for timeleft, if not set echo out 0.

separate php:

<?php
  if(isset($_GET['timeLeft'])){
    $_SESSION['timeLeft'] = $_GET['timeLeft'];
  }
?>

Inside timer JS (using JQuery):

$.ajax({url: "somePath/updateTimeLeft.php?timeLeft=1234"});

and when you load the page, in your php

if(isset($_SESSION['timeLeft'])){
  echo 'var timeLeft = ' . $_SESSION['timeLeft'] . ';';
  $_SESSION['timeLeft'] = undefined;
}else{
  echo 'var timeLeft = 0;';
}

Upvotes: 1

brasofilo
brasofilo

Reputation: 26055

Just use the browser Window.localStorage (or sessionStorage if it fits better).

<div class="countdown"></div>
<button style="display:none">FINISH!!!</button>
<script>
    $(document).ready(function() {
        var timer2 = localStorage.getItem('timer');
        if(timer2 === null) timer2 = "1:30";
        $('.countdown').html(timer2);

        var interval = setInterval(function() {
            var timer = timer2.split(':');
            var minutes = parseInt(timer[0], 10);
            var seconds = parseInt(timer[1], 10);
            --seconds;
            minutes = (seconds < 0) ? --minutes : minutes;
            if (minutes < 0){
                clearInterval(interval);
                localStorage.removeItem('timer');
                $('button').show();
            }else{
                seconds = (seconds < 0) ? 59 : seconds;
                seconds = (seconds < 10) ? '0' + seconds : seconds;
                $('.countdown').html(minutes + ':' + seconds);
                timer2 = minutes + ':' + seconds;
                localStorage.setItem('timer',timer2);
            }
        }, 1000);
    });
</script>

Upvotes: 1

Related Questions