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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Only Letting the Timer Count for x seconds?

    Hi, I'm trying to adapt a script I found online for a timer that goes in my webpage. The timer counts from 30 seconds down to 0. I've adapted it so that when it reaches 0 it goes back up to 30, but I was wondering how can I make it so that after a certain number of loops through the timer, it executes some other (non-JS) code instead of just doing the timer forever?

    I've introduced a variable t to try to do this, but when I put in if(t>1) {break} at the bottom, the timer doesn't work properly anymore (it doesn't display a number in the box).

    Thanks a lot for any help .

    <script>
    <!--
    //
    var t=0
    var milisec=0
    var seconds=30
    document.counter.d2.value='30'

    function display(){
    if (milisec<=0){
    milisec=9
    seconds-=1
    }
    if (seconds<=-1){
    milisec=0
    seconds=30
    t+=1
    }

    else
    milisec-=1
    document.counter.d2.value=seconds+"."+milisec
    setTimeout("display()",100)
    }
    display()



    -->
    </script>

  • #2
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Try this.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Countdown</title>
    <script type="text/javascript">
    (function($){
      $.Timer = {
        Total: 0, // Keep as 0 for the default total
        Display: function(o,newLength){
          var timer = document.getElementById(o.target);
          if(timer) {
            if(newLength === undefined) {o.length = o.length +1;} // Fix the timer length on start
            if($.Timer.Total == o.loops) {
              if(o.success !== undefined && typeof o.success == 'function') {
                o.success(); // Run the success function
              }
            } else {
              var olength   = o.length, // Store the default timer length
                  newLength = (newLength !== undefined)?newLength-1:o.length-1; // Running the countdown
              timer.innerHTML = newLength; // Updating the timer
              if(newLength == 0) {
                newLength = olength; // Reset the timer length
                $.Timer.Total = $.Timer.Total + 1; // Adding '1' to the total
              }
              setTimeout(Timer.Display,1000,o,newLength); // Re-running the countdown
            }
          }
        }
      };
    })(window);
    
    window.onload = (function(){
      Timer.Display({
        target: 'countdown',
        length: 30,
        loops: 2,
        success: function(){
          /**
           * In this function you can use 'this' as the root so for example
           * if you add an item to the object above you can use it in this
           * function, like the example below.
           */
          var target = document.getElementById(this.target);
          target.innerHTML='<input type="button" onclick="alert(\'The countdown finished!\');" value="Finished" />';
        }
      });
    });
    
    /**
     * You can even add your own object items to use in your success function
     * window.onload = (function(){
     *    Timer.Display({
     *      target: 'countdown',
     *      length: 30,
     *      loops: 2,
     *      finishedText: 'The countdown finished!',
     *      success: function(){
     *       var target = document.getElementById(this.target);
     *        target.innerHTML='<input type="button" onclick="alert(\''+this.finishedText+'\');" value="Finished" />';
     *     }
     *   });
     * });
     */
    </script>
    </head>
    <body>
    <span id="countdown"></span>
    </body>
    </html>
    </html>
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • Users who have thanked DJCMBear for this post:

    KodiTiger (12-23-2010)

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oh wow, that's fantastic, thanks so much for that! Much appreciated !

  • #4
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hmm, it works in Firefox and Google Chrome, but not in Internet Explorer (version 8 if that's important). Any idea why that would be and how to fix it?

  • #5
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    I'll have a look in a bit and see what I can do.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #6
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DJCMBear View Post
    I'll have a look in a bit and see what I can do.
    Thanks managed to come up with anything yet?

  • #7
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Quote Originally Posted by KodiTiger View Post
    Thanks managed to come up with anything yet?
    Sorry I will do it now, it was christmas today so wasn't really doing many codes.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #8
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Here is a fixed code works in every major browser

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Countdown</title>
    <script type="text/javascript">
    (function($){
      $.Timer = {
        Total: 0, // Keep as 0 for the default total
        Display: function(o,newLength){
          var timer = document.getElementById(o.target);
          if(timer) {
            if(newLength === undefined) {o.length = o.length +1;} // Fix the timer length on start
            if($.Timer.Total == o.loops) {
              if(o.success !== undefined && typeof o.success == 'function') {
                o.success(); // Run the success function
              }
            } else {
              var olength   = o.length, // Store the default timer length
                  newLength = (newLength !== undefined)?newLength-1:o.length-1; // Running the countdown
              timer.innerHTML = newLength; // Updating the timer
              if(newLength == 0) {
                newLength = olength; // Reset the timer length
                $.Timer.Total = $.Timer.Total + 1; // Adding '1' to the total
              }
              setTimeout(function(){Timer.Display(o,newLength);},1000); // Re-running the countdown
            }
          }
        }
      };
    })(window);
    
    window.onload = (function(){
      Timer.Display({
        target: 'countdown',
        length: 30,
        loops: 2,
        success: function(){
          /**
           * In this function you can use 'this' as the root so for example
           * if you add an item to the object above you can use it in this
           * function, like the example below.
           */
          var target = document.getElementById(this.target);
          target.innerHTML='<input type="button" onclick="alert(\'The countdown finished!\');" value="Finished" />';
        }
      });
    });
    
    /**
     * You can even add your own object items to use in your success function
     * window.onload = (function(){
     *    Timer.Display({
     *      target: 'countdown',
     *      length: 30,
     *      loops: 2,
     *      finishedText: 'The countdown finished!',
     *      success: function(){
     *       var target = document.getElementById(this.target);
     *        target.innerHTML='<input type="button" onclick="alert(\''+this.finishedText+'\');" value="Finished" />';
     *     }
     *   });
     * });
     */
    </script>
    </head>
    <body>
    <span id="countdown"></span>
    </body>
    </html>
    </html>
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • Users who have thanked DJCMBear for this post:

    KodiTiger (12-27-2010)

  • #9
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks very much for that, much appreciated!


  •  

    Posting Permissions

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