Search code examples
javascriptphpjquerytimercountdown

Javascript countdown timer + PHP code inside JS


I need help with countdown timer in javascript.I found the code below in PHPJabbers. This code works fine, but when I reload the page the time goes back to its initial time. I want to retain the time even if I load the page. I want also to add PHP function inside if seconds == 0. I'm not sure if it's possible. Thanks in advance

<span id="countdown" class="timer"></span>
<script>
var seconds = 60;
    function secondPassed() {
    var minutes = Math.round((seconds - 30)/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
    }
    document.getElementById('countdown').innerHTML = minutes + ":" +    remainingSeconds;
    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Buzz Buzz";
    } else {    
        seconds--;
    }
    }
var countdownTimer = setInterval('secondPassed()', 1000);
</script>

Solution

  • Check this, (implemented using cookies)

                    function setCookie(cname,cvalue,exdays)
                    {
                    var d = new Date();
                    d.setTime(d.getTime()+(exdays*24*60*60*1000));
                    var expires = "expires="+d.toGMTString();
                    document.cookie = cname + "=" + cvalue + "; " + expires;
                    }
                    function getCookie(cname)
                    {
                    var name = cname + "=";
                    var ca = document.cookie.split(';');
                    for(var i=0; i<ca.length; i++)
                      {
                      var c = ca[i].trim();
                      if (c.indexOf(name)==0) return c.substring(name.length,c.length);
                      }
                    return "";
                    }
    
                    //check existing cookie
                    cook=getCookie("my_cookie");
    
                    if(cook==""){
                       //cookie not found, so set seconds=60
                       var seconds = 60;
                    }else{
                         seconds = cook;
                         console.log(cook);
                    }
    
                    function secondPassed() {
                        var minutes = Math.round((seconds - 30)/60);
                        var remainingSeconds = seconds % 60;
                        if (remainingSeconds < 10) {
                            remainingSeconds = "0" + remainingSeconds;
                        }
                        //store seconds to cookie
                        setCookie("my_cookie",seconds,5); //here 5 is expiry days
    
                        document.getElementById('countdown').innerHTML = minutes + ":" +    remainingSeconds;
                        if (seconds == 0) {
                            clearInterval(countdownTimer);
                            document.getElementById('countdown').innerHTML = "Buzz Buzz";
                        } else {    
                            seconds--;
                        }
                    }
    
                    var countdownTimer = setInterval(secondPassed, 1000);
    

    working jsFiddle