Sign in to follow this  
devvvvv

How to make the counter stop and restart after 30 seconds

Recommended Posts

Hi
How can I change the code that when the counter get to 30 seconds he will stop and start the count again..?
This is the script:
(function($){
    
    // Number of seconds in every time division
    var days    = 24*60*60,
        hours    = 60*60,
        minutes    = 60;
    
    // Creating the plugin
    $.fn.countup = function(prop){
        
        var options = $.extend({
            callback    : function(){},
            start        : new Date()
        },prop);
        
        var passed = 0, d, h, m, s,
            positions;

        // Initialize the plugin
        init(this, options);
        
        positions = this.find('.position');
        
        (function tick(){
            
            passed = Math.floor((new Date() - options.start) / 1000);
            
            // Number of days passed
            d = Math.floor(passed / days);
            updateDuo(0, 1, d);
            passed -= d*days;
            
            // Number of hours left
            h = Math.floor(passed / hours);
            updateDuo(2, 3, h);
            passed -= h*hours;
            
            // Number of minutes left
            m = Math.floor(passed / minutes);
            updateDuo(4, 5, m);
            passed -= m*minutes;
            
            // Number of seconds left
            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;
    };


    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 = $('<span>',{
            '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');
            });
    }
})(jQuery);

 

Share this post


Link to post
Share on other sites

Well, you just start with function, but it doesn't have a name.  If you look down where it talks about seconds that's where you are interested:

            // Number of seconds left
            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);

If s is larger than thirty, then you want to start the function over again, I think.

if(s>30)nameOfThisFunction();

that would go right after 

s = passed;

 

Share this post


Link to post
Share on other sites

I think in this case the easiest solution is to actually fudge your timing, if you're using JS your timing isn't needing to be critical and as its in the page it wont be a long running process so the error will be minimal.

Try passing the current 'count' back into the function, resetting it when it hits  a certain threshold (in this case 30s, or 30000ms).


var THRESHOLD = 30000
var TICK_SPEED = 1000

function tick( count ) {
  if ( count >= THRESHOLD ) {
    setTimeout( function() {
      count( 0 )
    }, TICK_SPEED )
    return
  }

  setTimeout( function() {
    count( count + TICK_SPEED )
  }, TICK_SPEED )
}

Something like this resets the counter roughly every 30s.

This also saves expensive stuff like flooring and Date operations, although at a few ops per second performance won't be an issue anyway.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.