ساخت شمارنده معکوس

ساخت شمارنده معکوس

در این آموزش ما به شما نحوه ساخت یک شمارنده معکوس(countDown) را با استفاده از jQuery می دهیم.از این پلاگین می توانید برای روز شماری افتتاح سایت و یا هر چیز دیگری استفاده کنید.

برای مشاهده لینک وارد شود

ما این پلاگین را با نام “شمارنده معکوس” دریافت می کنیم.آن را با یک المان خالی فراخوانی کرده و با استفاده از کد های HTML  که برای شمارنده معکوس لازم است آن را پر خواهیم کرد.شما کاری لازم نیست انجام بدهیداما المانی که میخواهید نمایش داده شود راانتخاب کنید.

<div id="countdown" class="countdownHolder">
    <span class="countDays">
        <span class="position">
            <span class="digit static"></span>
        </span>
        <span class="position">
            <span class="digit static"></span>
        </span>
    </span>

    <span class="countDiv countDiv0"></span>

    <span class="countHours">
        <span class="position">
            <span class="digit static"></span>
        </span>
        <span class="position">
            <span class="digit static"></span>
        </span>
    </span>

    <span class="countDiv countDiv1"></span>

    <span class="countMinutes">
        <span class="position">
            <span class="digit static"></span>
        </span>
        <span class="position">
            <span class="digit static"></span>
        </span>
    </span>

    <span class="countDiv countDiv2"></span>

    <span class="countSeconds">
        <span class="position">
            <span class="digit static"></span>
        </span>
        <span class="position">
            <span class="digit static"></span>
        </span>
    </span>

    <span class="countDiv countDiv3"></span>
</div>

در مثال بالا پلاگین توسط تگی با آی دیcountdown فراخوانی میشود سپس پلاگین به کلاسcountdownHolder اضافه میشود.

در داخل آن نشانه گذاری هایی برای ارقام است.دو تگ spans برای هر واحد ارقام است(روز،ساعت،دقیقه،ثانیه) و این به معنی این است که شما میتونید تا۹۹ روز آینده را به طور معکوس نمایش دهید.

کلاس های static برای نمایش سایه و پس زمینه اعداد استفاده می شوند.وقتی اعداد کم میشوند این کلاس حذف میشود پس در CSS نمایش داده نمیشود و تاثیر نمی پذیرد.اعداد دو به دو در یک گروه هستند که این کار شما را برای مدیریت استایل آنها راحتتر می کند.

jQuery

اجازه بدید کار با نوشتن در تابع کمکی برای پلاگین ادامه بدیم

init  انجام نشانه گذاری هایی که در بالا دیدیم

swichdigit برای تعیین محل span ها و نمایش انیمیشن تغییر ارقام

استخراج این تابع ها به عنوان توابع جداگانه اجازه می دهد تا ما کدjQuery تمییز تری داشته باشیم.

assets/countdown/jquery.countdown.js

  function init(elem, options){
        elem.addClass('countdownHolder');

        // Creating the markup inside the container
        $.each(['Days','Hours','Minutes','Seconds'],function(i){
            $('<span class="count'+this+'">').html(
                '<span class="position">\
                    <span class="digit static">0</span>\
                </span>\
                <span class="position">\
                    <span class="digit static">0</span>\
                </span>'
            ).appendTo(elem);

            if(this!="Seconds"){
                elem.append('<span class="countDiv countDiv'+i+'"></span>');
            }
        });

    }

    // Creates an animated transition between the two numbers
    function switchDigit(position,number){

        var digit = position.find('.digit')

        if(digit.is(':animated')){
            return false;
        }

        if(position.data('digit') == number){
            // We are already showing this number
            return false;
        }

        position.data('digit', number);

        var replacement = $('<div>',{
            'class':'digit',
            css:{
                top:'-2.1em',
                opacity:0
            },
            html:number
        });

        // The .static class is added when the animation
        // completes. This makes it run smoother.

        digit
            .before(replacement)
            .removeClass('static')
            .animate({top:'2.5em',opacity:0},'fast',function(){
                digit.remove();
            })

        replacement
            .delay(100)
            .animate({top:0,opacity:1},'fast',function(){
                replacement.addClass('static');
            });
    }

ما برای بهتر کردن نمایش و حذف یا اضافه کردن توابعی که برای شمارنده نیاز داریم بعضی از کد ها آن را حذف کردیم تا به شکل زی درآید

assets/countdown/jquery.countdown.js

(function($){

    // Number of seconds in every time division
    var days	= ۲۴*۶۰*۶۰,
        hours	= ۶۰*۶۰,
        minutes	= ۶۰;

    // Creating the plugin
    $.fn.countdown = function(prop){

        var options = $.extend({
            callback	: function(){},
            timestamp	: ۰
        },prop);

        var left, d, h, m, s, positions;

        // Initialize the plugin
        init(this, options);

        positions = this.find('.position');

        (function tick(){

            // Time left
            left = Math.floor((options.timestamp - (new Date())) / 1000);

            if(left < 0){
                left = 0;
            }

            // Number of days left
            d = Math.floor(left / days);
            updateDuo(0, 1, d);
            left -= d*days;

            // Number of hours left
            h = Math.floor(left / hours);
            updateDuo(2, 3, h);
            left -= h*hours;

            // Number of minutes left
            m = Math.floor(left / minutes);
            updateDuo(4, 5, m);
            left -= m*minutes;

            // Number of seconds left
            s = left;
            updateDuo(6, 7, s);

            // Calling an optional user supplied callback
            options.callback(d, h, m, s);

            // Scheduling another call of this function in 1s
            setTimeout(tick, 1000);
        })();

        // This function updates two digit positions at once
        function updateDuo(minor,major,value){
            switchDigit(positions.eq(minor),Math.floor(value/10)%10);
            switchDigit(positions.eq(major),value%10);
        }

        return this;
    };

    /* The two helper functions go here */
})(jQuery);

تابعtick به تنهایی هر ثانیه را فراخوانی میکند در کنار آن ما اختلاف زمان بین تاریخ فعلی و زمان داده شده محاسبه می کنیم.تابعupdateDuo ارقام واحد های زمانی را به روز می کند.

پلاگین در حال خوانده شدن است در زیر نحوه استفاده کردن از آن را نوشتیم

assets/js/script.js

$(function(){

    var note = $('#note'),
        ts = new Date(2012, 0, 1),
        newYear = true;

    if((new Date()) > ts){
        // The new year is here! Count towards something else.
        // Notice the *1000 at the end - time must be in milliseconds
        ts = (new Date()).getTime() + 10*24*60*60*1000;
        newYear = false;
    }

    $('#countdown').countdown({
        timestamp	: ts,
        callback	: function(days, hours, minutes, seconds){

            var message = "";

            message += days + " day" + ( days==1 ? '':'s' ) + ", ";
            message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
            message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
            message += seconds + " second" + ( seconds==1 ? '':'s' ) + " 
";

            if(newYear){
                message += "left until the new year!";
            }
            else {
                message += "left to 10 days from now!";
            }

            note.html(message);
        }
    });

});

پایان

 

 

+6
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۲ دیدگاه ها

  1. سلام.ممنو از سایت بسیار خوبتون.
    عرض کنم لینک دانلود مشکل داره!

دیدگاه خود را برای مدیر سایت بنویسید انصراف از پاسخ

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


پنج − = 0

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>