در این مقاله نحوه نمایش شمارنده اعداد با استفاده از JQuery را شرح خواهیم داد

برای نمایش شمارنده اعداد راه های متعددی وجود دارد , به عنوان مثال ما می توانیم  با استفاده از تابع ()setInterval  اعداد را افزایش دهیم. همچنین می توانیم به صورت متناوب اعداد را افزایش دهیم و در لحظه اجرا همزمان این افزایش عدد را نمایش دهیم .ابتدا یک تگ <P> به صفحه اضافه میکنیم

<p id="counter"></p>

سپس اسکریپت زیر را در زیر تگ اضافه شده برای تعریف شروع و خاتمه شمارنده می نویسیم :

 <script>
                $('#counter').runCounter({
                    start: 0,
                    end: 1000,
                    duration: 10000
                });
            </script>

اسکریپت اعداد را از 0 تا 1000 در بازه زمانی 10 ثانیه شمارش می کند .

سپس اسکریپت زیر را در یک تگ اسکریپت جدا در head صفحه قرار می دهیم .

$.fn.runCounter = function (options) {
                 var defaults = {
                     start: 0,
                     end: 0,
                     duration: 1000
                 };

                 var opt = $.extend(defaults, options);

                 return this.each(function () {
                     var $para = $(this);
                     $({ ctr: opt.start }).animate({ ctr: opt.end }, {
                         duration: opt.duration,
                         easing: 'linear',
                         step: function () {
                             $para.text(Math.round(this.ctr));
                         }
                     });
                 });
             }

         })(jQuery);

در ادامه بخشهای مختلف کد بالا را توضیح خواهیم داد :

ابتدا تابع runCounter را فراخوانی میکنیم :

$.fn.runCounter = function () {}

مرحله بعد پلاگین خود را می سازیم و تنظیمات مربوط به آن را مشخص میکنیم :