Create a Text Counter with jQuery setInterval Method

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 counting number is: Start Counting…

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:

Click here to download.

The jQuery setInterval() function is very handy when doing some interesting animation.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>