نمایش شمارنده اعداد با استفاده از JQuery

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

نمایش شمارنده اعداد با استفاده از 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 () {}

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

var defaults = {
    start: 0,
    end: 0,
    duration: 1000
};
با استفاده از ()extend.$ مقدار پیش فرض را قرار می دهیم .
var opt = $.extend(defaults, options);
قسمت بعدی تابع را در متد each قرار میدهیم :
this.each(function () {}
در این تابع یک مقدار JQuery از تابعی که فراخوانی شده می باشد ایجاد میشود .
خاصیت بعدی از تابع ()function در JQuery استفاده میکنیم :
$({ ctr: opt.start }).animate({ ctr: opt.end }, {
    duration: opt.duration,
    easing: 'linear',
    step: function () {
        $para.text(Math.round(this.ctr));
    }
});
 
از زمانی که مقدار عدد مشخص میشود .ما میتوانیم خاصیتهای عددی را به صورت animate تغییر دهیم .
فقط این نکته را در نظر داشته باشیم که تعیین زمان بر حسب میلی ثانیه میباشد .(milisecond)
این تابع از یک الگوریتم ریاضی برای تغییر عدد استفاده میکند .توابع JQuery ما را در این امر یاری می کنند و با استفاده از
یک الگوریتم  ریاضی ساده می توانیم این قسمت را پیاده سازی کنیم .همچنین می توانید از این تابع برای اهداف متعددی استفاده کنید , به عنوان مثال میتوانید از از یک تاریخ گذشته تا به امروز این تابع را فراخوانی کنید .
 
فایل های ضمیمه