Today I am going to do a simple text counter with jQuery. The number of the text counter will increase by one in every one second.
Demo:
The jQuery codes are very simple, as shown below:
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> jQuery("document").ready(function() { //////////////////////////////////////////// ////////// Counter start from 1 ////////// //////////////////////////////////////////// var i = 0; function loopCounting() { i = i + 1; // Display number on text field jQuery(".outputText").text(i); } // Execute the function in set interval (milli-seconds) setInterval(loopCounting, 1000); }); </script> </head> <body> <h1>jQuery Text Counter</h1> The counting number is: <span class="outputText">Start Counting...</span> </body> </html>
The number is assigned to zero at the beginning. And then increase by one with the loopCounting() function.
The trick is using the jQuery setInterval() function.
setInterval allows to call a function to execute in a set time delay in milli-seconds. The following diagram explain how to use setInterval to call a function.
For more examples of using jQuery setInterval() method, please click on the following link:
http://www.gobiznow.com/jquery-rotation-animation-1.html
jQuery Example File:
The jQuery setInterval() function is very handy when doing some interesting animation.
Leave a Reply