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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Trying to loop (repeat) this Javascript counter

    I am using the counter script below to display a count from 1-36. Does anyone know how to edit the javascript to flash or blink the number 36 a few times, and then loop the script to start over and count from 1-36 again (and again)?

    Here's the script:


    <html>
    <head>
    <title></title>
    </head>


    <script type="text/javascript">
    var t, max, i;

    function Increase(amount) {
    max = amount;
    i = parseInt(document.getElementById("count").value);
    t = setInterval("SetIncrease()", 500);
    }

    function SetIncrease() {
    document.getElementById("count").value = ++i;
    if(i == max) {
    clearTimeout(t);
    }
    }
    </script>

    <body onLoad="Increase(36);">

    <input id="count" type="text" value="1" style="width:40px;font-family:georgia;font-size:30px;font-weight:bold;color:#CC0000;border: 0px solid #000000;text-align:right;background-color:#FFFF00;" align="center">

    </body>
    </html>

    Many thanks!

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    There's a number of things you could do... and I would personally have done the entire thing slightly differently; but using your current code, your best bet would be to change setInterval to setTimeout and do something like this:
    PHP Code:
    <!DOCTYPE html><!-- add a doctype or validators will have a fit! -->
    <
    html>
        <
    head>
            <
    title></title>
        </
    head>
        <
    script type="text/javascript">
            var 
    tmaxicount;
            
    // added count to global memory so you don't have to use document.getElementById every time (you should get in the habit of doing things like this ;))
            // and you don't actually need the var t since you're not clearing the timeout but I've left it in just in case you plan on using it later

            
    function Increase(amount) {
                
    max amount;
                
    count document.getElementById("count");
                
    parseInt(count.value);
                
    setTimeout("SetIncrease()"500);
            }

            function 
    SetIncrease() {
                
    count.value = ++i;
                if(
    == max) {
                    
    // here you flash the max amount and then start over
                    // using your current implementation, a simple way to flash would be to just have a number of setTimeout calls in a row
                    // see what's happening here? you should actually make a function to do this flash but we'll leave that for another exercise ;)
                    
    setTimeout(function(){count.value='';},500);
                    
    setTimeout(function(){count.value=max;},1000);
                    
    setTimeout(function(){count.value='';},1500);
                    
    setTimeout(function(){count.value=max;},2000);
                    
    setTimeout(function(){count.value='';},2500);
                    
    setTimeout(function(){count.value=max;},3000);
                    
    setTimeout(function(){count.value='';},3500);
                    
    setTimeout(function(){count.value=max;},4000);
                    
    0;
                    
    setTimeout("SetIncrease()",4500); // start over!

                
    } else {
                    
    setTimeout("SetIncrease()"500); // here you call setTimeout to call SetIncrease, works the same as setInterval but you have more control
                
    }
            }
        
    </script>

        <body onLoad="Increase(36);">

            <input id="count" type="text" value="1" style="width:40px;font-family:georgia;font-size:30px;font-weight:bold;color:#CC0000;border: 0px solid #000000;text-align:right;background-color:#FFFF00;" align="center">

        </body>
    </html> 
    Even though it is irrelevant, I should also note that you should have used "clearInterval" rather than "clearTimeout" in the code you originally posted because you were using "setInterval".

    Oh, by the way... when posting code, wrap it in "[PHP]" tags... and always indent your code... both make for easier reading.

    Edit: Maybe you had your original code indented, but not wrapping it in [PHP] or [CODE] tags probably removed the formatting. I've re-indented it for ya.
    Last edited by tfburges; 07-05-2011 at 12:42 AM.

  • Users who have thanked tfburges for this post:

    ehop66 (07-05-2011)

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello, I am very new at this, I've made a few pages of html and css for my first website and need a counter similar to this one to put on one of the pages EXCEPT...
    I need to make the "body onLoad" number a variable that will be input via keyboad by the user. I also need it to stop the count with a stop button and display the number of count on break. I will need it to continue breaking and displaying the number on break ten times without repeats if that's possible. Is anyone up to helping an old man with some code?
    Here's what I've got so far, it stops working when I try to add buttons for input and stop.
    Oh yeah....I do need it to loop very fast with either a 10ms or even 0ms timeout.
    Thanks for any input you can give me, I am getting a major headache.

    <!DOCTYPE html><!-- add a doctype or validators will have a fit! -->
    <html>
    <head>
    <title></title>
    </head>
    <script type="text/javascript">
    var t, max, i, count;


    function Increase(amount) {
    max = amount;
    count = document.getElementById("count");
    i = parseInt(count.value);
    t = setTimeout("SetIncrease()", 0);
    }

    function SetIncrease() {
    count.value = ++i;
    if(i == max) {

    setTimeout(function(){count.value='';},0);

    i = 0;
    t = setTimeout("SetIncrease()",0); // start over!

    } else {
    t = setTimeout("SetIncrease()", 00); // here you call setTimeout to call SetIncrease, works the same as setInterval but you have more control
    }
    }
    </script>

    <body onLoad="Increase(56);">

    <input id="count" type="text" value="1" style="width:40px;font-family:georgia;font-size:30px;font-weight:bold;color:#CC0000;border: 0px solid #000000;text-align:right;background-color:#FFFF00;" align="center">

    </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's what I got for input button.

    <!DOCTYPE html><!-- add a doctype or validators will have a fit! -->
    <html>
    <head>
    <title></title>
    </head>
    <script type="text/javascript">
    var t, max, i, count;
    // added count to global memory so you don't have to use document.getElementById every time (you should get in the habit of doing things like this )
    // and you don't actually need the var t since you're not clearing the timeout but I've left it in just in case you plan on using it later
    {
    document.getElementById('txt').value=x;
    {
    function Increase(amount) {
    max = amount;
    count = document.getElementById("count");
    i = parseInt(count.value);
    t = setTimeout("SetIncrease()", 0);
    }

    function SetIncrease() {
    count.value = ++i;
    if(i == max) {
    // here you flash the max amount and then start over
    // using your current implementation, a simple way to flash would be to just have a number of setTimeout calls in a row
    // see what's happening here? you should actually make a function to do this flash but we'll leave that for another exercise
    setTimeout(function(){count.value='';},0);

    i = 0;
    t = setTimeout("SetIncrease()",0); // start over!

    } else {
    t = setTimeout("SetIncrease()", 00); // here you call setTimeout to call SetIncrease, works the same as setInterval but you have more control
    }
    }
    </script>

    <body onLoad="Increase(x);">
    <input type="button" value="Enter your number" onclick="var x()" onclick="restart()">
    <input type="text" id="x">



    <input id="count" type="text" value="1" style="width:40px;font-family:georgia;font-size:30px;font-weight:bold;color:#CC0000;border: 0px solid #000000;text-align:right;background-color:#FFFF00;" align="center">

    </body>
    </html>

    Or maybe someone could suggest an easier method?
    Last edited by storkfmny; 03-25-2012 at 11:00 AM. Reason: forgot something


  •  

    Posting Permissions

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