Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/11/2013, 01:12
pskkk
 
Fecha de Ingreso: septiembre-2011
Mensajes: 49
Antigüedad: 12 años, 7 meses
Puntos: 3
Cambiar Fecha en un Countdown

Buenos dias, quiero cambiar la fecha para que el countdown empiece desde la fecha que le pongo:

Código:
(function ($) {
    var settings;
    var timer;

    var circleSeconds;
    var circleMinutes;
    var circleHours;
    var circleDays;

    var layerSeconds;
    var layerMinutes;
    var layerHours;
    var layerDays;

    var element;

    $(window).load(updateCircles);
    $(window).on("redraw",function(){ switched=false; updateCircles(); }); // An event to listen for
    $(window).on("resize", updateCircles);

    $.fn.countdown = function(options) {
        element = $(this);

        var defaults = $.extend({
            start: '1362139200',
            end: '1388461320',
            now: '1387461319',
            selectors: {
                value_seconds: '.clock_seconds .val',
                canvas_seconds: 'canvas_seconds',
                value_minutes: '.clock_minutes .val',
                canvas_minutes: 'canvas_minutes',
                value_hours: '.clock_hours .val',
                canvas_hours: 'canvas_hours',
                value_days: '.clock_days .val',
                canvas_days: 'canvas_days'
            },
            seconds: {
                borderColor: '#93ff93',
                borderWidth: '5'
            },
            minutes: {
                borderColor: '#fbde69',
                borderWidth: '5'
            },
            hours: {
                borderColor: '#c0fbff',
                borderWidth: '5'
            },
            days: {
                borderColor: '#ff8d72',
                borderWidth: '5'
            }
        }, options);

        settings = $.extend({}, defaults, options);

        dispatchTimer();

        if (!$.support.leadingWhitespace) {
            ie8();
        } else {        
            prepareCounters();
            startCounters();                        
        }
    };

    function ie8() {
        var interval = setInterval(function(){
            $(settings.selectors.value_days).html(timer.days);
            $(settings.selectors.value_hours).html(24 - timer.hours);
            $(settings.selectors.value_minutes).html(60 - timer.minutes);
            $(settings.selectors.value_seconds).html(60 - timer.seconds);

            if (timer.seconds > 59 ) {
                if (60 - timer.minutes == 0 && 24 - timer.hours == 0 && timer.days == 0) {
                    clearInterval(interval);

                    $('.clock-item', element).hide();
                    $('.clock-close').hide();
                    $('.clock-done').fadeIn();
                }
                timer.seconds = 1;

                if (timer.minutes > 59) {
                    timer.minutes = 1;
                    layerMinutes.draw();
                    if (timer.hours > 23) {
                        timer.hours = 1;
                        if (timer.days > 0) {
                            timer.days--;
                            $(settings.selectors.value_days).html(timer.days);
                        }
                    } else {
                        timer.hours++;
                    }
                    $(settings.selectors.value_hours).html(24 - timer.hours);
                } else {
                    timer.minutes++;
                }
                $(settings.selectors.value_minutes).html(60 - timer.minutes);
            } else {
                timer.seconds++;
            }
            $(settings.selectors.value_seconds).html(60 - timer.seconds);
        }, 1000);
    }

    function updateCircles() {        
        layerSeconds.draw();
        layerMinutes.draw();
        layerHours.draw();
        layerDays.draw();
    }

    function convertToDeg(degree) {
        return (Math.PI/180)*degree - (Math.PI/180)*90
    }

    function dispatchTimer() {
        timer = {
            total: Math.floor((settings.end - settings.start) / 86400),
            days: Math.floor((settings.end - settings.now ) / 86400),
            hours: 24 - Math.floor(((settings.end - settings.now) % 86400) / 3600),
            minutes: 60 - Math.floor((((settings.end - settings.now) % 86400) % 3600) / 60),
            seconds: 60 - Math.floor((((settings.end - settings.now) % 86400) % 3600) % 60 )
        }
    }

    function prepareCounters() {
        // Seconds
        var secondsStage = new Kinetic.Stage({
            container: settings.selectors.canvas_seconds,
            width: 220,
            height: 220
        });        

        circleSeconds = new Kinetic.Shape({
            drawFunc: function(canvas) {                     
                var radius = $('#' + settings.selectors.canvas_seconds).width()/2 - settings.seconds.borderWidth/2;
                var x = $('#' + settings.selectors.canvas_seconds).width()/2;
                var y = $('#' + settings.selectors.canvas_seconds).height()/2;                
                var ctxSeconds = canvas.getContext();

                ctxSeconds.beginPath();
                ctxSeconds.arc(x, y, radius, convertToDeg(0), convertToDeg(timer.seconds * 6));
                canvas.stroke(this);
                $(settings.selectors.value_seconds).html(60 - timer.seconds);
            },
            stroke: settings.seconds.borderColor,
            strokeWidth: settings.seconds.borderWidth
        });

        layerSeconds = new Kinetic.Layer();
        layerSeconds.add(circleSeconds);
        secondsStage.add(layerSeconds);

        // Minutes
        var minutesStage = new Kinetic.Stage({
            container: settings.selectors.canvas_minutes,
            width: 220,
            height: 220
        });

        circleMinutes = new Kinetic.Shape({
            drawFunc: function(canvas) {     
                var radius = $('#' + settings.selectors.canvas_minutes).width()/2 - settings.minutes.borderWidth/2;
                var x = $('#' + settings.selectors.canvas_minutes).width()/2;
                var y = $('#' + settings.selectors.canvas_minutes).height()/2;

                var ctx = canvas.getContext();
                ctx.beginPath();
                ctx.arc(x, y, radius, convertToDeg(0), convertToDeg(timer.minutes * 6));
                canvas.stroke(this);
                $(settings.selectors.value_minutes).html(60 - timer.minutes);

            },
            stroke: settings.minutes.borderColor,
            strokeWidth: settings.minutes.borderWidth
        });

        layerMinutes = new Kinetic.Layer();
        layerMinutes.add(circleMinutes);
        minutesStage.add(layerMinutes);

        // Hours
        var hoursStage = new Kinetic.Stage({
            container: settings.selectors.canvas_hours,
            width: 220,
            height: 220
        });

        circleHours = new Kinetic.Shape({
            drawFunc: function(canvas) {
                var radius = $('#' + settings.selectors.canvas_hours).width()/2 - settings.hours.borderWidth/2;
                var x = $('#' + settings.selectors.canvas_hours).width()/2;
                var y = $('#' + settings.selectors.canvas_hours).height()/2;

                var ctx = canvas.getContext();
                ctx.beginPath();
                ctx.arc(x, y, radius, convertToDeg(0), convertToDeg(timer.hours * 15));
                canvas.stroke(this);
                $(settings.selectors.value_hours).html(24 - timer.hours);

            },
            stroke: settings.hours.borderColor,
            strokeWidth: settings.hours.borderWidth
        });

        layerHours = new Kinetic.Layer();
        layerHours.add(circleHours);
        hoursStage.add(layerHours);

        // Days
        var daysStage = new Kinetic.Stage({
            container: settings.selectors.canvas_days,
            width: 220,
            height: 220
        });

        circleDays = new Kinetic.Shape({
            drawFunc: function(canvas) {
                var radius = $('#' + settings.selectors.canvas_days).width()/2 - settings.days.borderWidth/2;
                var x = $('#' + settings.selectors.canvas_days).width()/2;
                var y = $('#' + settings.selectors.canvas_days).height()/2;
                var ctx = canvas.getContext();

                ctx.beginPath();
                ctx.arc(x, y, radius, convertToDeg(0), convertToDeg((360 / timer.total) * (timer.total - timer.days)));
                canvas.stroke(this);
                $(settings.selectors.value_days).html(timer.days);

            },
            stroke: settings.days.borderColor,
            strokeWidth: settings.days.borderWidth
        });

        layerDays = new Kinetic.Layer();
        layerDays.add(circleDays);
        daysStage.add(layerDays);
    }

    function startCounters() {
        var interval = setInterval(function(){
            if (timer.seconds > 59 ) {
                if (60 - timer.minutes == 0 && 24 - timer.hours == 0 && timer.days == 0) {

etc..