Jump to content
Sign in to follow this  
devvvv

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 to 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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...