Javascript Countdown with PHP

Question

I want to have a countdown associated with a particular button on my PHP page and i am using following code based on javascript But,it resets the target value on page reload,so how to have the same without the target value getting reset.Can i do something with session ??

    <html>
    <body>
<p>Time remaining: <span id="countdownTimer"><span>00:00.<small>00</small></span></p>
<script type="text/javascript">
if (document.getElementById('countdownTimer')) {
    pad = function(n, len) { // leading 0's
        var s = n.toString();
        return (new Array( (len - s.length + 1) ).join('0')) + s;
    };

    function countDown() {
        var now = new Date();
        if ( (now.getDay() >= 0) && (now.getDay() <= 6) ) { // Monday to Friday only
            var target = 23; // 15:00hrs is the cut-off point
            if (now.getHours() < target) { // don't do anything if we're past the cut-off point
                var hrs = (target - 1) - now.getHours();
                if (hrs < 0) hrs = 0;
                var mins = 59 - now.getMinutes();
                if (mins < 0) mins = 0;
                var secs = 59 - now.getSeconds();
                if (secs < 0) secs = 0;
                var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
                document.getElementById('countdownTimer').innerHTML = str;
            }
        }
    }
    var timerRunning = setInterval('countDown()', 1000);
}
</script>
</body>
</html>

Do you want properly persistent storage or will transient be ok? Session would work, as would a simple cookie on the client. — Jeff Watkins
– Jeff Watkins, Commented Mar 11, 2013 at 14:54
You are not properly closing your countdownTimer span. And never pass a string to setInterval, but use a function reference (in your case: setInterval(countDown, 1000)). — Marcel Korpel
– Marcel Korpel, Commented Mar 11, 2013 at 14:56
i want persistent storage but how to work out with sessions?? — Ankur
– Ankur, Commented Mar 11, 2013 at 15:05
what do u mean by target value getting reset? is the 0's that come initialy after page load? — Nikhar
– Nikhar, Commented Mar 11, 2013 at 15:17

Graham Robertson · Accepted Answer · 2013-03-12 01:13:48Z

1

Instead of evaluating your variable 'now' as such:

var now = new Date();

Evaluate it like this (assuming our browser supports LocalStorage):

if (!localStorage.myDate)
    localStorage.myDate = (new Date()).toString();
var now = new Date(localStorage.myDate);

This way, we only ever evaluate the current date on first load. After that, we refer to a serialized string version of that date and pass that as an argument when we create our 'now' variable.

If we want to support older browser (cough IE), we can use userData or simply do something very similar with cookies.

answered Mar 12, 2013 at 1:13

Graham Robertson

8285 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Gilbertson · Accepted Answer · 2013-03-11 23:31:19Z

So essentially, you want to capture 'now' once, and not have that change, correct?

function getNow(){ //call this rather than use var now = new Date();
  if (window.localStorage){
      if (!localStorage.now){
        localStorage.now = new Date();
      }
      return localStorage.now;
  }else{
    return new Date();
  }
}

Pardon if I've got a bit of syntax out (I'm not sure if you'd have to convert a date to store it in localStorage), but that's the gist of it. For IE7 and below support you'd need to use cookies, but the concept remains the same.

Also, I think you have a mistake in:

 if ( (now.getDay() >= 0) && (now.getDay() <= 6) )

That will always be true, try:

if ( (now.getDay() > 0) && (now.getDay() < 6) )

Collectives™ on Stack Overflow

Javascript Countdown with PHP

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related