www.webdeveloper.com
Results 1 to 13 of 13

Thread: Can a timed countdown script be written for my application?

  1. #1
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21

    Can a timed countdown script be written for my application?

    Hi, I would like to know if a script that will subtract a small number from a larger number and have the result at a defined end time with the live countdown being displayed be written. I will try to explain my needs. Example; Start count at 10,000 at 9.00am and end count at 1,000 at 9.30am; the second (within reason) that 9.30am arrives the value should be 1000. Between 9.00am and 9.30am the live countdown needs to be visible on my website. Thanks in advance.

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    double check my math, but this looks about right. adjust the output destination as needed, like someDiv.innerHTML...

    Code:
    counter=10000;
    period=1000*60*30;
    refresh=1000;
    bpm=(counter / period) * refresh;
    
    function beat(){
     counter-=bpm;
     document.title= Math.floor(  counter  );
    }
    
    setInterval(beat, 1000);

  3. #3
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    Thanks for that even though it doesn't make sence to me; I'll pass it on to someone that can understand it. We have a script running at the moment that always ends early. The longer the script runs for the greater the error. Here is another way to describe what is required; I want to designate a number (for example, 10,000) to begin at a specified time (9:00am) and have that number (not the time) countdown to another specified number (1000) at a specified end time (9:30am). Will your code do the trick?

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,432

    Lightbulb

    My attempt at verifying 'rnd me's code:

    I have not waited the 30 minutes to see if it accurate, but you could change to 1-2 minutes for testing.
    (Also added some testing code to verify actions at times outside of 9:00 to 9:30 am)

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head>
    <body>
    <script type="text/javascript">
    // From: 
    // http://www.webdeveloper.com/forum/showthread.php?275787-Can-a-timed-countdown-script-be-written-for-my-application
    
    var now = new Date();              // for anytime testing purposes
    var hrs = now.getHours();          // hrs = 9;  // force to 9 am
    var mins = now.getMinutes();       // mins = 0; // force to :00 am
    var MINS = 30;                     // add 30 minutes to :00 for :30 am
    var bpm = 0; 
    
    if ((hrs == 9) && (mins < MINS)) { // if within time window, display title changes
      var counter=10000;
      var period=1000*60*30;        // change to 1 or 2 if don't want to wait 30 minutes (
      var refresh=1000;
      bpm=(counter / period) * refresh;
      setInterval(beat, 1000);
    }                                  // if outside time window, do nothing but notify
                                  else { document.title = 'Outside contest time window'; }
    
    function beat(){
      counter-=bpm;
      document.title= 'Countdown to end of contest: '+Math.floor(  counter  );
    }
    
    </script>
    
    </body>
    </html>
    @rnd me: Neat idea to use document title for the testing of the actions of the script.

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    settimout is in accurate

    this uses the date

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
    <input size=100 name=Show0 >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    <input size=10 name=Show7 >
    <input size=10 name=Show8 >
    <input size=10 name=Show9 ><br>
    <textarea name=TA rows=1 cols=100 ></textarea>
    </form>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function timer(o){
     var n=new Date();
     o.srt=new Date(n.getFullYear(),n.getMonth(),n.getDate(),o.StartTime[0],o.StartTime[1])
     o.fin=new Date(n.getFullYear(),n.getMonth(),n.getDate(),o.FinishTime[0],o.FinishTime[1])
     o.time=Math.floor((o.fin-o.srt));
    document.Show.Show1.value=o.MaxValue;
     cksrt(o);
    }
    
    function cksrt(o){
     var n=new Date();
     if (n-o.srt<0){
      o.to=setTimeout(function(){ cksrt(o); },1000);
     }
     else {
      ckfin(o);
     }
    }
    
    function ckfin(o){
     var n=new Date();
    document.Show.Show1.value=o.MinValue;
     if (n-o.fin<0){
    document.Show.Show1.value=Math.round((o.MaxValue-o.MinValue)*((o.fin-n)/o.time)+o.MinValue);
      o.to=setTimeout(function(){ ckfin(o); },1000);
     }
    }
    
    timer({
     StartTime:[4,25],
     FinishTime:[4,55],
     MaxValue:1100,
     MinValue:100
    })
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    Hi vwphillips, I am not javascript savy at all. I can see the text areas at the bottom of the page but which ones do I enter my own values into?

  7. #7
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    please post a link to a page using your current script so I can see how you are using it
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    PM sent with link.

  9. #9
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    the text boxes are there to show the output of the counter

    the counter checks for the start time as soon as the first time is called

    the start and finish times and the count min and max are passed to the function as an object
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  10. #10
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    Thanks, your script works a treat however I should have been more specific from the start. The script needs to run in "real time" not using the users computer time. Is such a script possibe?

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,432

    Question

    Quote Originally Posted by APF View Post
    Thanks, your script works a treat however I should have been more specific from the start. The script needs to run in "real time" not using the users computer time. Is such a script possibe?

    Two questions:

    1. To which post are you referring?

    2. What is your definition of "computer time" and "real time"?

  12. #12
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    Hi JMRKER, it was vwphillips I was commenting on. "Computer Time" is the time the users own computer is showing which could be out of sink with the real world "real time" quite a bit if it is not contantly updated. When compared with timeticker.com my PC is out a minute or so daily. I guess "real time" is "internet time". Correct?

  13. #13
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by APF View Post
    Thanks, your script works a treat however I should have been more specific from the start. The script needs to run in "real time" not using the users computer time. Is such a script possibe?
    yes, very possible. do you have a link to the live version?
    the easiest way is using ajax, but that depends upon you're server's configuration. Most servers emit a "Date" header, which ajax can read using new Date(xhr.getResponseHeader("Date")).

    if not, you can use a free jsonp webserveice to grab a known time. you will need to adjust that to your server's timezone.

    ex: http://json-time.appspot.com/time.js...ack=serverTime

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles