HTML Countdown?

Discussion in 'Web Design & Coding' started by lieb39, Jun 14, 2003.

  1. lieb39

    lieb39 Apple lover, PC User

    Messages:
    526
    Location:
    Australia
    Go ahead, laugh. I need a small little php/javascript/html (BUT NOT PERL!!!!) countdown script. Can anyone advise me where I can learn this or just please make one?:) I know that it is very small, I just need one that can countdown the time to a certain date, with days, hours, minutes, and seconds.

    For example, if it was Wednesday at 7:00PM and I wanted it to countdown to Thursday at 7:00PM than I would want the little table to display:

    Days: 1 Hours: 0 Minutes: 0 Seconds: 0

    or a bit more complicated (hope I get the math here right) lets say its the same day and we want to count down to thursday at 8:05:02PM

    Days: 1 Hours: 1 Minutes: 05 Seconds: 02


    Thank you in advanced,

    lieb39
     
  2. NetRyder

    NetRyder Tech Junkie Folding Team

    Messages:
    13,256
    Location:
    New York City
    Ok, here comes the code. Add this section to your <HEAD>

    Code:
    <script>
    <!-- Countdown script
    var apday = new Date("June 17, 2003 17:00:00 PST");
    
     function toStrng(n){
      s=""
      if(n<10) s+="0"
      return s+n.toString();
     }
     
     function cntdwn(){
      cl=document.clock;
      d=new Date();
      count=Math.floor((apday.getTime()-d.getTime())/1000);
      if(count<=0){
         cl.days.value ="----";
         cl.hours.value="--";
         cl.mins.value="--";
         cl.secs.value="--";
         return;
        }
      cl.secs.value=toStrng(count%60);
      count=Math.floor(count/60);
      cl.mins.value=toStrng(count%60);
      count=Math.floor(count/60);
      cl.hours.value=toStrng(count%24);
      count=Math.floor(count/24);
      cl.days.value=count;    
      
      setTimeout("cntdwn()",500);
     }
    // end script -->
    </SCRIPT>
    
    Then call the cntdwn() function in your <BODY> tag, like this:

    Code:
    <body onLoad="cntdwn()">
    
     
  3. lieb39

    lieb39 Apple lover, PC User

    Messages:
    526
    Location:
    Australia
  4. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    onload isn't a valid attribute to the body tag.. Just thought i'd let you know ;)

    You'll be better off using a PHP countdown, of course this won't be "live" like the many JS ones out there, but you can keep it compliant.
    PHP:
    <?php
    $day 
    14;
    $month 6
    $year 2003;
    print (
    "There are " . (int)((mktime (0,0,0,$month,$day,$year) - time(void))/86400) . " days to go");
    ?>
    That one is very basic, but it could be expanded on.

    If you want a javascript countdown, then take a look here : http://www.hotscripts.com/JavaScript/Scripts_and_Programs/Countdowns/index.html
     
  5. NetRyder

    NetRyder Tech Junkie Folding Team

    Messages:
    13,256
    Location:
    New York City
    Oh yeah...I forgot to mention the code to actually display the counter :p

    Add this code between your body tags:

    Code:
    <form name="clock">   
    <input name="days" size=4> days
    <input name="hours" size=2> hours
    <input name="mins" size=2> mins
    <input name="secs" size=2> secs 
    </form>
    
     
  6. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
  7. NetRyder

    NetRyder Tech Junkie Folding Team

    Messages:
    13,256
    Location:
    New York City
    Yup, should work now :p