SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Omaha, NE
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Javascript Countdown or Timer?

    I'm trying to develop a countdown or timer in javascript that will countdown from a given value (say 3 minutes) and not reset itself when the page is refreshed. When teh countdown reached zero, it needs to display "Out of Time". Any ideas? I've scaned some script sites but haven't found anything useful yet.

    Thanks for your help!

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the only way i can think of atm, is by capturing the keydown event of the f5/ctrl f5 button, returning false. And pass the time to a query string whilst redirecting the user to the new location and use location.search to extract the timer number and re-initialise the clock.

    Dunno if that makes any sense to you, but it is long winded unless using frames, which i would avoid any way.
    Last edited by Andrew-J2000; Aug 7, 2002 at 10:06.

  3. #3
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only way to prevent the timer being restarted is to store the fact that it has run out of time somewhere - a cookie or session variable should be used, depending on if you're using server-side scripting and whether or not the timeout needs to be permanent or not. That said, there's nothing you can do to stop a user firing up a different browser to access the same page (or clearing his cookies), in which case the timer will be reset.

    Ultimately the web is a stateless environment, so you can't impose state upon it. Cookies are your best bet.

    So, write a standard countdown timer using the JS setTimeout() function, and set that cookie when the timer runs out!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  4. #4
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    EPaisely, do you merely need to stop the refreshing action, or stop users revisiting the page and starting with a new timer? If the latter, then Andrew's technique won't work.

    Of course, if the cookies are cleared or they are disabled entirely then neither will mine (however you could detect the latter and deny access to the page entirely), but there is no other way to simulate state with a stateless protocol!

    Also, what do you want to happen if the timer is halfway through, and the user refreshes the page (or goes away and comes back)? If you need it to continue the countdown from where it left off, then you need to set that cookie on each decrement of the timer.
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  5. #5
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by M@rco
    EPaisely, do you merely need to stop the refreshing action, or stop users revisiting the page and starting with a new timer? If the latter, then Andrew's technique won't work.
    Out of curosity why do you say that mine wont work, the only problem with my method is that it is long winded and messes up if javascript is disabled

  6. #6
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Omaha, NE
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Solution

    I got somethign to work!

    This script will show a count down to a certain date, once that point in time is reached...it states that your time is up. The value is not reset with each refresh...



    <html>
    <head>
    <title>COUNT DOWN</title>


    <script>
    var yr=2002;
    var mo=8;
    var da=8;
    var ho=16;
    var mi=28;

    function countdown()
    {
    var today = new Date();
    var todayy = today.getYear();

    if(todayy < 1000)
    {
    todayy += 1900;
    }

    var todaym = today.getMonth();
    var todayd = today.getDate();
    var todayh = today.getHours();
    var todaymin = today.getMinutes();
    var todaysec = today.getSeconds();
    var todaystring = todaym+"/"+todayd+"/"+todayy+" "+todayh+":"+todaymin+":"+todaysec;

    futurestring = (mo-1)+"/"+da+"/"+yr+" "+ho+":"+mi+":"+"00";

    dd = Date.parse(futurestring)-Date.parse(todaystring);
    dday = Math.floor(dd/(60*60*1000*24)*1);
    dhour = Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
    dmin = Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
    dsec = Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

    if(document.getElementById)
    {
    if(dsec <= 0 && dmin <= 0 && dday <= 0)
    {
    //When countdown ends!!

    var countdownDiv = document.getElementById("countdown");
    countdownDiv.innerHTML = "<b><div class='small'><font color='red'>Times Up!<BR>Please Draft</font></div></b>";


    }
    //if on day of occasion
    else if(todayy == yr && todaym == (mo-1) && todayd == da)
    {
    // need to handle this!!

    var countdownDiv = document.getElementById("countdown");
    countdownDiv.innerHTML = "<b>" + dmin + "</b> m <b>" + dsec + "</b> s ";

    setTimeout("countdown()",1000)
    }
    //else, if not yet
    else
    {
    var countdownDiv = document.getElementById("countdown");
    countdownDiv.innerHTML = "<font color=#990000><b>" + dday + "</b> days</font> <b> " + dhour + "</b> h <b>" + dmin + "</b> m <b>" + dsec + "</b> s";

    setTimeout("countdown()",1000)
    }
    }
    }

    if(document.getElementById)
    {
    document.write("<div id=countdown></div>");
    document.write("<br>");

    countdown();
    }
    else
    {
    document.write("<br>");
    document.write("<div></div>");
    document.write("<br>");
    }

    </script>
    </head>

    <body onload="countdown();">

    </body>
    </html>
    Last edited by epaisley; Aug 8, 2002 at 13:32.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •