Sugerencia rápida:haga un temporizador jQuery Count Up

El año pasado, publiqué un pequeño tutorial sobre la construcción de un temporizador de cuenta regresiva ordenado. Una de las solicitudes que he recibido desde entonces es una forma de cambiar el código para que cuente, mostrando el tiempo que ha pasado desde que se abrió la página o algún otro punto en el tiempo.

En realidad, esto es bastante fácil y será un gran tema para un consejo rápido. ¡Así que aquí vamos!

Paso 1:Cambiar el nombre del antiguo

Primero, debe obtener una copia del complemento original del artículo vinculado anterior y extraerlo en algún lugar de su disco duro. Ahora no desea tener un complemento llamado count down eso cuenta, ¿verdad? Tenemos que cambiarle el nombre. Cambiar los nombres de los activos/cuenta atrás carpeta y los archivos dentro de ella para contar respetuosamente. También recuerde cambiar las rutas en index.html que se refieren a estos archivos.

Paso 2:escribir lo nuevo

Solo se deben realizar modificaciones menores en el propio complemento. Abra assets/countup/jquery.contup.js y haz las siguientes ediciones:

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

    var options = $.extend({
        callback    : function(){},
        start       : new Date()    // Changing this to "start"
    },prop);

    // Tename the "left" variable to "passed"
    var passed = 0, d, h, m, s,
        positions;

    init(this, options);

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

    (function tick(){

        // Calculate the passed time
        passed = Math.floor((new Date() - options.start) / 1000);

        // Calculate the passed minutes, hours and days     

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

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

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

        // Number of seconds passed
        s = passed;
        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;
};

Para llamar al complemento, simplemente haga lo siguiente (este es también el código que debe colocar en script.js en lugar del actual):

$('#countdown').countup();

Alternativamente, si desea contar desde un momento en el pasado:

$('#countdown').countup({
    start: new Date(2012, 10, 27, 15, 58, 21) //year, month, day, hour, min, sec
});

¡Es una envoltura!