Recurrent Javascript Countdown

I have an annoying problem, i have trying to implement a simple 10 or 15 minute recurrent countdown. i have tried jQuery but it just gives me options to count down to a date and st

Solution 1:

Try this:

functionmycountre(countdownId, countdownSeconds, countdownLooping){
    var countre = document.getElementById(countdownId); // get html elementif (!countre) {
        return;
    }

    var target = newDate().getTime() + 1000 * countdownSeconds; // target timevar intervalId; // id of the interval// update functionfunctionupdatecountre(){
        var time = Math.floor((target - newDate().getTime()) / 1000); // countdown time in secondsif (time < 0) { // if countdown endsif (countdownLooping) { // if it should loop
                target += 1000 * countdownSeconds; // set new target time
                time = Math.floor((target - newDate().getTime()) / 1000); // recalculate current time
            } else { // otherwiseclearInterval(intervalId); // clear interval
                time = 0; // set time to 0 to avoid displaying negative values
            }
        }

        // split time to seconds, minutes and hoursvar seconds = '0' + (time % 60);
        time = (time - seconds) / 60;
        var minutes = '0' + (time % 60);
        time = (time - minutes) / 60;
        var hours = '0' + time;

        // make string from splited valuesvar str = hours.substring(hours.length - 2) + ':' + minutes.substring(minutes.length - 2) + ':' + seconds.substring(seconds.length - 2);
        countre.innerHTML = str;
    }

    intervalId = setInterval(updatecountre, 200); // start interval to execute update function periodically
};
mycountre(
    'countre3', // id of the html element15 * 60, // time in seconds (15min here)true// loop after countdown ends?
);

Working demo: http://jsfiddle.net/Xv3jx/1/

Solution 2:

Small attempt for a jQuery plugin - more generic without minute/hour calc to avoid that the exaple gets too big:

(function($) {
    $.fn.countdown = function(params) {
        this.each(function() { 
            container = $.extend({
                t: $(this),
                stepSize: 1000, // millisecondsduration: 3600, // secondsoffset: 0,
                stepCallback: function() {},
                finishCallback: function() {},
                interval: function() {
                    if (this.offset>this.duration) {
                        this.finishCallback();
                    } else {
                        this.stepCallback();
                    }
                    this.offset += this.stepSize/1000;
                }
            }, params);
            setInterval(function() {
                container.interval();
            }, container.stepSize);
        });
        returnthis;
    };
})(jQuery); 

Can be used with:

$('.main').countdown({
    stepCallback: function() { console.log('step');}, 
    finishCallback: function() { console.log('done');} 
}); 

A simple countdown would then be implemented like this:

$('.main').countdown({
    duration: 300,
    stepCallback: function() {
        var time = this.duration-this.offsetvar seconds = '0' + (time % 60);
        time = (time - seconds) / 60;
        var minutes = '0' + (time % 60);
        time = (time - minutes) / 60;
        var hours = '0' + time;
        var str = hours.substring(hours.length - 2) + ':' + minutes.substring(minutes.length - 2) + ':' + seconds.substring(seconds.length - 2);
        $(this.t).html(str);
    }, 
    finishCallback: function() {  $(this.t).html('tadaaa'); } 
});

Cheers