Countdown Timer problems

Discussion in 'Javascript' started by Bonnett, Jan 14, 2004.

  1. Bonnett

    Bonnett Guest

    I have been creating a generic countdown timer (source code below), counting
    the seconds, minutes, hours and days till an event, but I have having
    trouble with it finding out how many hours are left. When i get it to
    display a complete countdown (days hours mins seconds left) it is one hour
    short when counting dates that fall in the following time brackets:
    2004,2,29 -> 2004,9,31
    2005,2,28 -> 2005,9,30
    2006,2,27 -> 2006,9,29
    etc..

    I have tested this on mozilla firebird 0.7, and internet explorer 5.5 + 6
    and the problem always occurs. Is this a bug in javascript, or just my bad
    mathematics in finding the modulo value.


    Source code:

    <HTML>
    <HEAD>
    <TITLE>JavaScript Countdown</TITLE>
    <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
    <!--
    <!-- Basic Countdown Timer//-->
    <!-- By Peter Bonnett () //-->
    <!-- http://uk.geocities.com/peterbonnett //-->
    var theTime="";
    var type = "theLot"//Default is the lot

    function getType(){
    if (document.theForm.changeType[0].checked) {
    type = "seconds"
    }
    else if (document.theForm.changeType[1].checked) {
    type = "mins"
    }
    else if (document.theForm.changeType[2].checked) {
    type = "hours"
    }
    else if (document.theForm.changeType[3].checked) {
    type = "days"
    }
    else if (document.theForm.changeType[4].checked) {
    type = "theLot"
    }
    }

    function showTheTime() {
    getType();//See what radio button is checked
    now = new Date
    next = new Date(2004,2,8); //Date you are counting down to
    if(type=="seconds"){
    document.getElementById("countdown").innerHTML =
    parseInt((next.getTime() - now.getTime())/1000)+" seconds"; //Set text to
    show seconds left
    }
    else if(type=="mins"){
    document.getElementById("countdown").innerHTML =
    parseInt((next.getTime() - now.getTime())/(1000*60))+" mins"; //Set text to
    show minutes left
    }
    else if(type=="hours"){
    document.getElementById("countdown").innerHTML =
    parseInt((next.getTime() - now.getTime())/(1000*60*60))+" hours"; //Set text
    to show hours left
    }
    else if(type=="days"){
    document.getElementById("countdown").innerHTML =
    parseInt((next.getTime() - now.getTime())/(1000*60*60*24))+" days"; //Set
    text to show days left
    }
    else if(type=="theLot"){
    days = parseInt((next.getTime() - now.getTime())/(1000*60*60*24));
    //Calculation to get the days
    hrsLeft = parseInt((next.getTime() -
    now.getTime())/(1000*60*60))%24;//Calculation to get the hours left
    minsLeft = parseInt((next.getTime() -
    now.getTime())/(1000*60))%60;//Calculation to get the minutes left
    secsLeft = parseInt((next.getTime() -
    now.getTime())/(1000))%60;//Calculation to get the seconds left
    document.getElementById("countdown").innerHTML = days + " days " + hrsLeft
    + " hours " + minsLeft + " minutes " + secsLeft +" seconds. ";
    }
    setTimeout("showTheTime()",1000)

    }

    //-->
    </SCRIPT>
    </HEAD>
    <BODY BGCOLOR=WHITE onLoad="showTheTime()">
    <DIV ID="countdown"><!-- Where the time left is displayed//--></DIV>
    <FORM NAME="theForm">
    Choose type:
    <INPUT TYPE=RADIO NAME="changeType">Seconds
    <INPUT TYPE=RADIO NAME="changeType">Minutes
    <INPUT TYPE=RADIO NAME="changeType">Hours
    <INPUT TYPE=RADIO NAME="changeType">Days
    <INPUT TYPE=RADIO NAME="changeType" CHECKED>The Lot
    </FORM>
    </BODY>
    </HTML>
    Bonnett, Jan 14, 2004
    #1
    1. Advertising

  2. Bonnett

    Lee Guest

    Bonnett said:
    >
    >I have been creating a generic countdown timer (source code below), counting
    >the seconds, minutes, hours and days till an event, but I have having
    >trouble with it finding out how many hours are left. When i get it to
    >display a complete countdown (days hours mins seconds left) it is one hour
    >short when counting dates that fall in the following time brackets:
    >2004,2,29 -> 2004,9,31
    >2005,2,28 -> 2005,9,30
    >2006,2,27 -> 2006,9,29
    >etc..
    >
    >I have tested this on mozilla firebird 0.7, and internet explorer 5.5 + 6
    >and the problem always occurs. Is this a bug in javascript, or just my bad
    >mathematics in finding the modulo value.


    Fall back in Fall. Spring forward in Spring.
    Lee, Jan 14, 2004
    #2
    1. Advertising

  3. Bonnett

    Bonnett Guest

    "Lee" <> wrote in message
    news:...
    > Bonnett said:
    > >
    > >I have been creating a generic countdown timer (source code below),

    counting
    > >the seconds, minutes, hours and days till an event, but I have having
    > >trouble with it finding out how many hours are left. When i get it to
    > >display a complete countdown (days hours mins seconds left) it is one

    hour
    > >short when counting dates that fall in the following time brackets:
    > >2004,2,29 -> 2004,9,31
    > >2005,2,28 -> 2005,9,30
    > >2006,2,27 -> 2006,9,29
    > >etc..
    > >
    > >I have tested this on mozilla firebird 0.7, and internet explorer 5.5 + 6
    > >and the problem always occurs. Is this a bug in javascript, or just my

    bad
    > >mathematics in finding the modulo value.

    >
    > Fall back in Fall. Spring forward in Spring.
    >


    *groans*

    Thank you, i shall have to remember to put a little message on the page
    informing anyone who uses it

    Bonnett
    Bonnett, Jan 14, 2004
    #3
  4. JRS: In article <bu4d02$dop56$-berlin.de>, seen in
    news:comp.lang.javascript, Bonnett <>
    posted at Wed, 14 Jan 2004 21:41:05 :-
    >"Lee" <> wrote in message
    >news:...
    >> Bonnett said:
    >> >
    >> >I have been creating a generic countdown timer (source code below),

    >counting
    >> >the seconds, minutes, hours and days till an event, but I have having
    >> >trouble with it finding out how many hours are left. When i get it to
    >> >display a complete countdown (days hours mins seconds left) it is one

    >hour
    >> >short when counting dates that fall in the following time brackets:
    >> >2004,2,29 -> 2004,9,31
    >> >2005,2,28 -> 2005,9,30
    >> >2006,2,27 -> 2006,9,29
    >> >etc..
    >> >
    >> >I have tested this on mozilla firebird 0.7, and internet explorer 5.5 + 6
    >> >and the problem always occurs. Is this a bug in javascript, or just my

    >bad
    >> >mathematics in finding the modulo value.

    >>
    >> Fall back in Fall. Spring forward in Spring.

    >
    > Thank you, i shall have to remember to put a little message on the page
    >informing anyone who uses it



    Obviously you did not read the newsgroup FAQ carefully enough; nor
    articles posted here within the last few days.

    There is no need for a little message; just code it right.

    You have a choice: assuming you are counting to midwinter, and it is now
    summer, do you or do you not want to show the extra hour?

    To show it, just use the UTC functions throughout.

    To avoid it, do not use getTime, but do long-arithmetic subtraction of
    the fields of the current civil time from those of the target. This
    becomes almost trivial if the target is a midnight - but first, convert
    from Y M D to days.


    One should not use parseInt to make a number an integer; Math.floor is
    provided for that.

    You have next = new Date(2004,2,8) ;
    next = new Date("2004/03/08")
    while longer is less likely to be in error.

    Don't put 1000 as the second parameter of setTimeout; one can easily do
    better - see below.

    Much of the text of showTheTime is repeated, and could be outside the
    conditionals: e.g. use one var T = document.getElementById("countdown")
    and several T.innerHTML = ... ; use one
    var DT = (next.getTime() - now.getTime()) and several DT.

    ..innerHTML does not work on all browsers; see FAQ discussion in this
    newsgroup.

    Don't let your newsreader wrap long lines; do it yourself, where best
    for legibility. Those who wish to test your code, or modifications to
    it, should not be forced to repair it first.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr John Stockton, Jan 15, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ryan Stewart

    GUI countdown timer in a JApplet?

    Ryan Stewart, Dec 23, 2003, in forum: Java
    Replies:
    2
    Views:
    844
  2. JSP countdown timer

    , Nov 1, 2005, in forum: Java
    Replies:
    4
    Views:
    14,731
  3. KennethGorelick

    Countdown Timer

    KennethGorelick, Feb 19, 2006, in forum: Python
    Replies:
    2
    Views:
    547
    KennethGorelick
    Feb 19, 2006
  4. Dirk Hagemann

    Countdown timer for different timezones

    Dirk Hagemann, Jul 6, 2006, in forum: Python
    Replies:
    1
    Views:
    459
    Marc 'BlackJack' Rintsch
    Jul 6, 2006
  5. Michael J.

    Need special kind of countdown timer

    Michael J., Aug 27, 2003, in forum: Javascript
    Replies:
    0
    Views:
    99
    Michael J.
    Aug 27, 2003
Loading...

Share This Page