Simple 15 second countdown timer, tripping a function

Discussion in 'JavaScript' started by Submerged, May 30, 2007.

0
  1. #1
    Hey, Javascript is not my strongest point, so I was hoping to get some help form y'all :)

    I'm working on a script that requires a countdown timer. Nothing fancy, just something that will show the numbers on the screen as it counts down (not in a textbox though, just normal numbers). When it hits zero, it should trip a seperate function. Please keep the code easily readable so I can make little changes as needed. Thanks for your time :D

    -Alex
     
    Submerged, May 30, 2007 IP
  2. DavidMerrilees

    DavidMerrilees Guest

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    <!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" lang="en" >
    <head>
    <title>count down from 15</title>
    <script type="text/javascript">
    window.onload = function() {
    /* set your parameters(
    number to countdown from,
    pause between counts in milliseconds,
    function to execute when finished
    )
    */
    startCountDown(15, 1000, myFunction);
    }

    function startCountDown(i, p, f) {
    // store parameters
    var pause = p;
    var fn = f;
    // make reference to div
    var countDownObj = document.getElementById("countDown");
    if (countDownObj == null) {
    // error
    alert("div not found, check your id");
    // bail
    return;
    }
    countDownObj.count = function(i) {
    // write out count
    countDownObj.innerHTML = i;
    if (i == 0) {
    // execute function
    fn();
    // stop
    return;
    }
    setTimeout(function() {
    // repeat
    countDownObj.count(i - 1);
    },
    pause
    );
    }
    // set it going
    countDownObj.count(i);
    }

    function myFunction() {
    alert("hi alex");
    }
    </script>
    </head>
    <body>
    <div id="countDown"></div>
    </body>
    </html>
     
    DavidMerrilees, May 30, 2007 IP
  3. Submerged

    Submerged Active Member

    Messages:
    132
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    Awesome, that pretty much does it all. And I like the ending :p Thanks for the help.

    -Alex
     
    Submerged, May 30, 2007 IP
  4. kirby009

    kirby009 Peon

    Messages:
    608
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    how do you know this.
     
    kirby009, May 30, 2007 IP
  5. DavidMerrilees

    DavidMerrilees Guest

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    "Awesome, that pretty much does it all. And I like the ending :p Thanks for the help."

    Hey, no problem. BTW, the line 'countDownObj.innerHTML = i;' would be more neatly expressed as 'this.innerHTML = i;

    "how do you know this."

    Many years as a web developer.
     
    DavidMerrilees, May 31, 2007 IP