JQuery counter on div

Question

I am beginner with jQuery and have simple question with it.

My php script is:

<html>
<body>  
<?php
$counter = 1;
while ($counter<=10) {
echo $counter;\\want jquery counter here which run on screen from 1 to 10
$counter++; 
}
?>
</body>

If i run this script, I get the following output, like 12345678910

My question is, how can i reproduce this in jQuery, so that i can get counter on my screen, which run from 1 to 10 at one place, & final output on screen will be 10.

If possible, please post full script, it will be really helpful to progress faster in this field. I try other sources, but their scripts are not for beginners like me in jquery field. Thanks.

Do some research about AJAX. But notice that in this case, you won't be getting each number separately. You would get the full 'string' at once `12345678910`. Also, why do you need to count with php? Can't you count with javascript? If this is just an example code, It's going to be hard to help you. And a note: this loop should arguably be a `FOR`. — FirstOne, Nov 14 '15 at 13:19
You don't even need PHP. Just use JS and update a numeric value every x interval until you reach 10. — Terry, Nov 14 '15 at 13:19
I have learned php only and just started with jquery. just wondering how to mix them both? — Tushar Khan, Nov 14 '15 at 13:22
duplicate of http://stackoverflow.com/questions/20618355/the-simplest-possible-javascript-countdown-timer and this to http://stackoverflow.com/questions/5517597/plain-count-up-timer-in-javascript — Blag, Nov 14 '15 at 13:25

Elentriel · Answer 1 · 2015-11-14T13:52:41.003

Possible example https://jsfiddle.net/1gtr6vx3/

first html, including an id to focus on

<div id="counter"></div>

You do not actually need php for what you asked. just javascript(can be done without jquery, but i like jquery) is enough

var step = 1;
var max = 10;
function add_to_count(){
    if(step++ <= max)
    {
        jQuery("#counter").text(step);
        window.setTimeout(add_to_count,1000);
    }
};

window.setTimeout(add_to_count,1000);

code pretty much: set initial step value (1)

Set max step value(10)

Make a function to add 1 to the step, compare it to max to see if finished, if not finished show it on your counter div

do all the above with timeout so that the user will actually see it hapening (the first thing is the function to call the second is the time to be called after in milliseconds)

score 1 · Answer 2 · answered Nov 14 '15 at 13:33

You're using php - the numbers 12345678910 are being added to your page before your browser actually receives it. You should probably do this in JavaScript.

If you want php to output JavaScript/jQuery you can simply echo the code:

<?php
    echo "<script>$(document).ready(function(){ code here... });";
?>

But from what you're trying to do you don't need php...php is server side scripting, so the script is executed and the page generated and then sent to your browser for display...the counter isn't "live" as far as your browser is concerned.

You should probably use a function like setTimeout() to periodically display and update your counter.

Is there a reason why you're trying to use php here?

score 1 · Answer 3 · answered Nov 14 '15 at 13:48

Try this one:

$( document ).ready(function() {
     var handle;
        var counter=0;             
     handle = setInterval(function(){
           counter = counter + 1;
           $('#value').text(counter); 
           if (counter == 10) clearInterval(handle);          
        }, 400);   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span> counter:  </span>
<span id="value"></span>

JQuery counter on div

My php script is:

3 Answers3