Trying to loop (repeat) this Javascript counter

ehop66 · 07-05-2011, 12:08 AM

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!

tfburges · 07-05-2011, 12:35 AM

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 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

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

        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='';},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);
                i = 0;
                t = setTimeout("SetIncrease()",4500); // start over!

            } else {
                t = 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.

storkfmny · 03-25-2012, 10:54 AM

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>
<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>

storkfmny · 03-25-2012, 10:58 AM

Here's what I got for input button.

<!DOCTYPE html>
<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?