This could be hard to explain but I'll give it a shot.

 

in games you have a score/points, when you earn some points it will update your points like you would expect but some games do like an animation of some sort, so let's say your on 100 points and you gain 250 then you final value you would be 350 (wow am great at maths) but instead of going something like 100 to 350 in a flash it will go maybe something like 100, 154, 548, 687, 981, 342, but always end up at 350 (points that it would add up too 100 + 250) in a animation ad like to know if this can be done in jquery that's if you know what i mean by now probably not but still?

 

The link below is kind of what am trying to get across but not exactly what i mean but hopefully will give you a better idea on what the hell am on about

 

 

click the "text displayer" and that is sort of what i mean but with numbers

Like this

 

 

 

BIG THANKS

Just whipped this up - obviously tidy up the JS a little, but should give you something to work from. Works for me, but I just tested very quickly in Safari

 

<!DOCTYPE>
<html>
   <head>
       <script type="text/javascript">
           function countTo(elem, current, to){
               if (++current <= to){
                   elem.innerHTML = current;
                   setTimeout(function(){
                       countTo(elem, current, to);
                   }, 5);
               }
           }
           function randomiseTo(elem, value, maxValue, maxIterations, curIterations){
               curIterations = curIterations == null ? 0 : curIterations;
               if (++curIterations <= maxIterations){
                   elem.innerHTML = Math.floor(Math.random() * (maxValue+1));
                   setTimeout(function(){
                       randomiseTo(elem, value, maxValue, maxIterations, curIterations);
                   }, 50);
               } else {
                   elem.innerHTML = value;
               }
           }
       </script>
   </head>
   <body>
       <p>Counter: <span id="counter"></span></p>
       <button onclick="countTo(document.getElementById('counter'), 0, 100)">Count to 100</button>
       <button onclick="randomiseTo(document.getElementById('counter'), 100, 999, 50)">Randomise to 100</button>
   </body>
</html>

 

Edit: Mis-read what you wanted, think you'll find it somewhere in there now

 

Edit 2: If you want that in jQuery let me know.

 

Edit 3: Three edits?! Did you want it to randomise each individual number? Let me know, fix that up tomorrow. I'm tired, and it's showing!

Edited January 4, 201313 yr by andyl

Just whipped this up - obviously tidy up the JS a little, but should give you something to work from. Works for me, but I just tested very quickly in Safari

 

<!DOCTYPE>
<html>
<head>
<script type="text/javascript">
function countTo(elem, current, to){
if (++current <= to){
elem.innerHTML = current;
setTimeout(function(){
countTo(elem, current, to);
}, 5);
}
}
function randomiseTo(elem, value, maxValue, maxIterations, curIterations){
curIterations = curIterations == null ? 0 : curIterations;
if (++curIterations <= maxIterations){
elem.innerHTML = Math.floor(Math.random() * (maxValue+1));
setTimeout(function(){
randomiseTo(elem, value, maxValue, maxIterations, curIterations);
}, 50);
} else {
elem.innerHTML = value;
}
}
</script>
</head>
<body>
<p>Counter: <span id="counter"></span></p>
<button onclick="countTo(document.getElementById('counter'), 0, 100)">Count to 100</button>
<button onclick="randomiseTo(document.getElementById('counter'), 100, 999, 50)">Randomise to 100</button>
</body>
</html>

 

Edit: Mis-read what you wanted, think you'll find it somewhere in there now

 

Edit 2: If you want that in jQuery let me know.

 

Edit 3: Three edits?! Did you want it to randomise each individual number? Let me know, fix that up tomorrow. I'm tired, and it's showing!

 

Like to start off by saying thanks and very nice. And yes the randomize it what i wanted but would not mind having both for future reference and ye jquery would be great.

 

p.s well done on understanding what i put, more so when you were tired

 

thanks

Randomise in jQuery. Very similar to Vanilla JS so you can re-use the function easily...I assume you won't be just calling it after a button click!

 

<!DOCTYPE html>
<html>

 <head>
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
   <script type="text/javascript">
     $(function () {

       var scoring = false;

       function randomiseTo(elem, value, maxValue, maxIterations, curIterations) {
         curIterations = curIterations == null ? 0 : curIterations;
         scoring = true;
         if (++curIterations <= maxIterations) {
           $(elem).html(Math.floor(Math.random() * (maxValue + 1)));
           setTimeout(function () {
             randomiseTo(elem, value, maxValue, maxIterations, curIterations);
           }, 50);
         } else {
           $(elem).html(value);
           scoring = false;
         }
       }

       $("#score").click(function () {
         if (!scoring) {
           randomiseTo($("#counter"), 250, 999, 50);
         }
       });

     });
   </script>
 </head>

 <body>
   <p>Score: <span id="counter">0</span>

   </p>
   <button id="score">Score 250!</button>
 </body>

</html>

Randomise in jQuery. Very similar to Vanilla JS so you can re-use the function easily...I assume you won't be just calling it after a button click!

 

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {

var scoring = false;

function randomiseTo(elem, value, maxValue, maxIterations, curIterations) {
curIterations = curIterations == null ? 0 : curIterations;
scoring = true;
if (++curIterations <= maxIterations) {
$(elem).html(Math.floor(Math.random() * (maxValue + 1)));
setTimeout(function () {
randomiseTo(elem, value, maxValue, maxIterations, curIterations);
}, 50);
} else {
$(elem).html(value);
scoring = false;
}
}

$("#score").click(function () {
if (!scoring) {
randomiseTo($("#counter"), 250, 999, 50);
}
});

});
</script>
</head>

<body>
<p>Score: <span id="counter">0</span>

</p>
<button id="score">Score 250!</button>
</body>

</html>

 

When i said i was looking for the randomize i meant the first one sorry about that i think it looks better that the randomize one don't ya think, the randomize one look like it does not know what its doing if you get me

 

 

and no ill not be just doing it after a click something like..

 

a user does something then goes check in a database then does some magic and then echo out value then use the animation to display.

 

Ah, here you go:

 

<!DOCTYPE html>
<html>

 <head>
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
   <script type="text/javascript">
     $(function () {

       var scoring = false;

       function countTo(elem, current, incr, to) {
         scoring = true;
         to = to > 0 ? to : current + incr;
         if (++current <= to) {
           $(elem).html(current);
           setTimeout(function () {
             countTo(elem, current, incr, to);
           }, 5);
         } else {
           scoring = false;
         }
       }

       $("#score").click(function () {
         if (!scoring) {
           countTo($("#counter"), parseInt($("#counter").html()), 250);
         }
       });

     });
   </script>
 </head>

 <body>
   <p>Score: <span id="counter">0</span>

   </p>
   <button id="score">Score +250!</button>
 </body>

</html>

Edited January 5, 201313 yr by andyl

Ah, here you go:

 

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {

var scoring = false;

function countTo(elem, current, incr, to) {
scoring = true;
to = to > 0 ? to : current + incr;
if (++current <= to) {
$(elem).html(current);
setTimeout(function () {
countTo(elem, current, incr, to);
}, 5);
} else {
scoring = false;
}
}

$("#score").click(function () {
if (!scoring) {
countTo($("#counter"), parseInt($("#counter").html()), 250);
}
});

});
</script>
</head>

<body>
<p>Score: <span id="counter">0</span>

</p>
<button id="score">Score +250!</button>
</body>

</html>

 

 

Thanks again man good to see people like you helping others out, been looking for a good forum been on others and you can get some people who are great with code (pros even) but are up there own ass about it talk to you like a stupid t***, anyway enough with the ranting

 

thanks again

Thanks again man good to see people like you helping others out, been looking for a good forum been on others and you can get some people who are great with code (pros even) but are up there own ass about it talk to you like a stupid t***, anyway enough with the ranting

 

thanks again

 

Ha! I know the sort, believe me. It's like, if they know the answer...you definitely should too. It's not just web development, it's even worse with more serious programming languages.

 

Anyway, no probs. Good luck

hey me again ha! just wondering if there is any kind of function or anything that works like number_format in PHP converts 1000 into 1,000 when echoed out, i don't like to display numbers without a comma looks messi , not sure if there is such a function, unless it is build manually?

Ah, here you go:

 

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {

var scoring = false;

function countTo(elem, current, incr, to) {
scoring = true;
to = to > 0 ? to : current + incr;
if (++current <= to) {
$(elem).html(current);
setTimeout(function () {
countTo(elem, current, incr, to);
}, 5);
} else {
scoring = false;
}
}

$("#score").click(function () {
if (!scoring) {
countTo($("#counter"), parseInt($("#counter").html()), 250);
}
});

});
</script>
</head>

<body>
<p>Score: <span id="counter">0</span>

</p>
<button id="score">Score +250!</button>
</body>

</html>

 

 

and then i could just throw it on the end of your code then should be a good script am going to try to animate it a bit more like what i referenced before sort of have them like cubes with numbers on each side of that cube then it rolls over to the next number till it reaches the final value. Don't no how that will work out but hey should look good if i get it right (Y)

First result on Google, seems legit!

 

http://phpjs.org/functions/number_format/

First result on Google, seems legit!

 

http://phpjs.org/fun.../number_format/

 

Thats javascript not jQuery plus it's built manually not part of the core which is what I was after but thanks anyway

Thats javascript not jQuery

 

Correct me if I'm wrong, but jQuery is just an extension of Javascript...

Correct me if I'm wrong, but jQuery is just an extension of Javascript...

 

okay, but as you know am sure, people do see them as two different codes, even though one is make up from the other. All I asked is if there were a quick fix.. if you like in jQuery for my problem.

 

 

Thanks again man good to see people like you helping others out, been looking for a good forum been on others and you can get some people who are great with code (pros even) but are up there own ass about it talk to you like a stupid t***, anyway enough with the ranting

 

thanks again

 

Really hoping your not one of them, don't want to offend you or anyone else, but all i did is ask a question that's the whole point f a forum i would think...

 

again if i got the wrong end of the stick then am sorry really i am.

thanks again for the help