Javascript countdown from PHP timestamp

Mutley · December 3, 2008

I've looked all over but the scripts I find don't do this or are very bloated.

I simply have a PHP unix time, which I want to countdown from in seconds as a visual display (no refresh).

so if:

$time = 20;//20 seconds in UNIX Time?

How do I countdown from 20?

Many thanks,

Nick.

rhodesa · December 3, 2008

it would look something like this:

<html>
  <head>
    <script type="text/javascript">
      var num = 20;
      var timer;
      function countdown() {
        num--;
        document.getElementById('countdown_ele').innerHTML = num;
        if(num < 1){
          clearTimeout(timer);
        }
      }
      function init() {
        document.getElementById('countdown_ele').innerHTML = num;
        timer = setInterval("countdown()",1000);
      }
    </script>
  </head>
  <body onload="init();">
    <span id="countdown_ele"></span>
  </body>
</html>

Mutley · December 3, 2008

Brilliant! Thanks! I have some logic issues though, with what I'm trying to do.

When you enter a page, it records that exact time with time() and enters it in the database (as $viewTime);

What I wish to do, is do a 20 second countdown, from when you entered that page but it only works until the difference is greater than 20, then it gets confused... here is my code...

$timeDifa = time() - $viewTime;

$timeDif = 20 - $timeDifa;

echo $timeDif;

So if it was 1228329985 and the time now is 1228329990, that's 15 seconds but as soon as it goes over 20, it goes negative and gets confused. I want it to simply stop at 0 once it does this.

Any thoughts?

Thanks alot,

Nick.

rhodesa · December 3, 2008

just use an if to only do the countdown if $timeDiff > 0 .... right?

Mutley · December 3, 2008

Aha, of course! Finally, trying to make it display an alternate message, so when it reaches 0, it says "DONE". I'm not very confident with Javascript but this is what I tried:

    <script type="text/javascript">
	var num = <?=$timeDif?>;
	if(num <= 0){
		var num = "DONE";
	}else{
		var timer;
	}
	function countdown(){
		num--;
		document.getElementById('countdown_ele').innerHTML = num;
		if(num < 1){
			clearTimeout(timer);
		}
	}
	function init(){
		document.getElementById('countdown_ele').innerHTML = num;
		timer = setInterval("countdown()",1000);
	}
    </script>

Which works but then it seems to try counting again and displays "NaN" instead. Also, is there anyway to load the init() without placing it in the body tag?

Many thanks for your help! - Nick.

rhodesa · December 3, 2008

init() can't be run until the <span> is created. so you can just put it at the bottom of the page:

<html>
  <body>
  
  
    <span id="countdown_ele"></span>
    


    <script type="text/javascript">
      var num = <?=$timeDif?>;
      var timer;

      function countdown(){
         if(num < 1){
            if(timer)
               clearTimeout(timer);
            document.getElementById('countdown_ele').innerHTML = 'DONE';
         }else{
            document.getElementById('countdown_ele').innerHTML = num;
            num--;
            if(!timer)
               timer = setInterval("countdown()",1000);
         }
      }
      countdown();
    </script>
  </body>
</html>

Mutley · December 3, 2008

Thanks a lot!

Is it possible to use javascript in a Form Button?

What I'd like to do is make it so when it isn't "DONE" the form button is disabled. Then when it is DONE, it un-disables itself. I don't think though I can have javascript in a button from what my editor is telling me.

Any thoughts? I was thinking of simply attaching "disabled" to a Javascript variable in an IF statement. Is it this easy?

Thanks alot.

Mutley · December 3, 2008

Had a quick Google for the answer, found something that might do the trick but doesn't seem to work. I'm trying to make the Submit button disable without refresh. This is what I tried:

    <span id="countdown_ele"></span><br /><br />
    <script type="text/javascript">
      var num = <?=$timeDif?>;
      var timer;

      function countdown(){
         if(num < 1){
            if(timer)
               clearTimeout(timer);
            document.getElementById('countdown_ele').innerHTML = '<font style=\'color:#355A75\'><b>Ready to Race!</b></font>';
        document.getElementById('idofmybutton').disabled = false; 
         }else{
            document.getElementById('countdown_ele').innerHTML = "<font style=\'color:#355A75\'><b>You must wait " + num + " seconds before you can race again.</b></font>";
        document.getElementById('idofmybutton').disabled = true; 
            num--;
            if(!timer)
               timer = setInterval("countdown()",1000);
         }
      }
      countdown();
    </script>

rhodesa · December 3, 2008

code worked for me:

    <span id="countdown_ele"></span>
    <input type="submit" id="idofmybutton" />
    <br /><br />

    <script type="text/javascript">
      var num = <?=$timeDif?>;
      var timer;

      function countdown(){
         if(num < 1){
            if(timer)
               clearTimeout(timer);
            document.getElementById('countdown_ele').innerHTML = '<font style=\'color:#355A75\'><b>Ready to Race!</b></font>';
        document.getElementById('idofmybutton').disabled = false;
         }else{
            document.getElementById('countdown_ele').innerHTML = "<font style=\'color:#355A75\'><b>You must wait " + num + " seconds before you can race again.</b></font>";
        document.getElementById('idofmybutton').disabled = true;
            num--;
            if(!timer)
               timer = setInterval("countdown()",1000);
         }
      }
      countdown();
    </script>

are you getting any JavaScript errors?

Mutley · December 4, 2008

I have got it to work but it only does it to 1 button, I have several forms each tagged with that ID, it only seems to do it to the first button.

Is there a way around this?

Again thanks a lot for your help!

rhodesa · December 4, 2008

you aren't using HTML properly. any given ID can only be used once in an html document

Mutley · December 4, 2008

So is there a work around this or do I have to give them all seperate IDs?

Adam · December 4, 2008

You could use a class?

getElementsByClass('disable_enable_me');

.. this will return an array of elements, so you'd need to loop through them to disable them all.

Adam

rhodesa · December 4, 2008

i don't believe getElementsByClassName() is universally supported yet. the easiest way is to probably loop over the form elements

Mutley · December 4, 2008

When you say loop through the elements do you mean like:

document.getElementById('idofmybutton').disabled = false;

document.getElementById('idofmybutton1').disabled = false;

document.getElementById('idofmybutton2').disabled = false;

document.getElementById('idofmybutton3').disabled = false;

etc? The problem though is the forms are generated from a PHP database, so there could be any amount of forms depending on how many rows are in the table.

rhodesa · December 4, 2008

no, something like this:

<style type="text/css">
  #countdown_ele {
    color: #355A75;
    font-weight: bold;
  }
</style>
<form id="myform" method="post" action="">
  <span id="countdown_ele"></span>
  <br><br>
  <input type="text" name="fiel1" /> <input type="button" value="Submit 1" /><br />
  <input type="text" name="fiel2" /> <input type="button" value="Submit 2" /><br />
  <input type="text" name="fiel3" /> <input type="button" value="Submit 3" /><br />

  <input type="submit" id="idofmybutton" />
</form>
<script type="text/javascript">
  var num = <?=$timeDif?>;
  var timer;

  function countdown(){
     if(num < 1){
        if(timer)
           clearTimeout(timer);
        document.getElementById('countdown_ele').innerHTML = 'Ready to Race!';
        setFormDisabed(false);
     }else{
        document.getElementById('countdown_ele').innerHTML = "You must wait " + num + " seconds before you can race again.";
        num--;
        if(!timer)
           timer = setInterval("countdown()",1000);
     }
  }
  function setFormDisabed( disabled ){
    var form = document.getElementById('myform');
    for(var n=0;n < form.length;n++){
      if(form[n].tagName == 'INPUT' && (form[n].type == 'button' || form[n].type == 'submit')){
        form[n].disabled = disabled;
      }
    }
  }
  
  setFormDisabed(true);
  countdown();
</script>

Mutley · December 4, 2008

Can you get it to loop forms too? As there are multiple forms with multiple buttons.

Just to make it a little more complicated, sorry!

Thanks a lot.

rhodesa · December 4, 2008

to do every form on the page:

  function setFormDisabed( disabled ){
    var forms = document.forms;
    for(var i=0;i < forms.length;i++){
      var form = forms[i];
      for(var n=0;n < form.length;n++){
        if(form[n].tagName == 'INPUT' && (form[n].type == 'button' || form[n].type == 'submit')){
          form[n].disabled = disabled;
        }
      }
    }
  }

or, for just every button on the page:

  function setFormDisabed( disabled ){
    var eles = document.getElementsByTagName('INPUT');
    for(var n=0;n < eles.length;n++){
      if(eles[n].type == 'button' || eles[n].type == 'submit'){
        eles[n].disabled = disabled;
      }
    }
  }

Sign In

Javascript countdown from PHP timestamp

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information