Javascript countdown timer + PHP code inside JS

Question

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>

Thank you for the reply @hindmost. But which of the two is better? — rrr
– rrr, Commented Apr 10, 2014 at 8:00
How about the PHP function inside the if(seconds == 0) {}. I tried to put my PHP code inside it, but It's not working. — rrr
– rrr, Commented Apr 10, 2014 at 8:11
You can't call PHP function inside JS directly. You only can use indirect call through AJAX. — hindmost
– hindmost, Commented Apr 10, 2014 at 8:19

Bhavesh · Accepted Answer · 2014-04-10 08:21:31Z

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

@Bhavesh Nice code, but is it possible to modify it to work so that the countdown is still running if someone navigates away from the specific page that has the timer, and then returns to it later?

Undo · Accepted Answer · 2016-03-26 15:08:06Z

0

Nice solution by bhavesh.. If someone wants to show the days,hour,mins, seconds together then they can refer this code.

Reverse timer from javascript:

var target_date = new Date('Aug 01 2014 20:47:00').getTime();
    var days, hours, minutes, seconds;
    var countdown = document.getElementById('timeremaining');
    var countdownTimer = setInterval(function () {
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;

        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;

        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;
        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);

        if(days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0 )
        {
           document.getElementById('timeremaining').innerHTML = '';
           clearInterval(countdownTimer);              
        }
        else
        {       
            if(days>0)
              {
                 days= days+'d,';
              } 
              else
              {
                 days='';
              }            
            countdown.innerHTML ='( ' + days + checkTime(hours) + ':'+ checkTime(minutes) + ':' + checkTime(seconds) +' remaining)';    
        }
    }, 1000);

    function checkTime(i) {
        if (i < 10) {i = '0' + i};  
        return i;
    }

edited Mar 26, 2016 at 15:08

Undo♦

25.7k38 gold badges113 silver badges132 bronze badges

answered Aug 2, 2014 at 18:28

Samuel Joy

6086 silver badges8 bronze badges

1 Comment

Greg Zaal Over a year ago

Bottom link is dead :( Do you still have the jsfiddle link somewhere?

Collectives™ on Stack Overflow

Javascript countdown timer + PHP code inside JS

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related