Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Countdown Timer

  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Countdown Timer

    Hi All,

    I am trying to set up a countdown function that will be called on the click of a button.

    Function is below
    Code:
    function countDown(sec, min) {
    
      sec--;
      if (sec == -01) {
        sec = 59;
        min = min - 1;
      } else {
       min = min;
      }
    if (sec<=9) { sec = "0" + sec; }
      time = (min<=9 ? "0" + min : min) + " min and " + sec + " sec ";
    if (document.getElementById) { theTime.innerHTML = time; }
      SD=window.setTimeout("countDown();", 1000);
    if (min == '00' && sec == '00') { sec = "00"; window.clearTimeout(SD); }
    }
    
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }
    
    addLoadEvent(function() {
     
    });

    However I get an error after one second. Script can be found here - http://www.jivalot.co.uk/m.php

    Can anyone help?

    Kind regards,

    Slate

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,010
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    That could never have worked! Try this instead:

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    var timeInSecs;
    var ticker;
    
    function startTimer(secs){
    timeInSecs = parseInt(secs);
    ticker = setInterval("tick()",1000); 
    tick(); // to start counter display right away
    }
    
    function tick() {
    var secs = timeInSecs;
    if (secs>0) {
    timeInSecs--;
    }
    else {
    clearInterval(ticker); // stop counting at zero
    //startTimer(5 * 60);  // and start again if required
    }
    
    var hours= Math.floor(secs/3600);
    secs %= 3600;
    var mins = Math.floor(secs/60);
    secs %= 60;
    var result =  ((mins < 10) ? "0" : "" ) + mins + ":" + ( (secs < 10) ? "0" : "" ) + secs;
    document.getElementById("countdown").innerHTML = result;
    }
    
    </script>
    
    </head>
    
    <body>
    <input type = "button" value = "Start the timer" onclick = "startTimer(5 * 60)"><br>
    <span id="countdown" style="font-weight: bold;"></span>
    </body>
    </html>
    The scrpt is called by startTimer(seconds), and here is set to 5 * 60 = 300 seconds = 5 minutes.

    You could extend the timer to show hours as well simply by:-

    Code:
    var result = ((hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins
                      + ":" + ( (secs < 10) ? "0" : "" ) + secs;
    Quizmaster: What is the only prime number between 60 and 65?
    Contestant: 50.
    Last edited by Philip M; 12-02-2009 at 01:18 PM.


  •  

    Posting Permissions

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