Starting this timer using the button

I found this neat countdown timer, and I was curious if anyone could help with its small changes.

  • Start with a single click.
  • Where would I put the AJAX call function in a PHP file when the timer reaches 0?
  • Repeat when this is complete.

The timer I found is here: http://jsfiddle.net/johnschult/gs3WY/

var countdown = $("#countdown").countdown360({
radius: 60,
seconds: 20,
label: ['sec', 'secs'],
fontColor: '#FFFFFF',
autostart: false,
onComplete: function () {
  console.log('done');
}
});

countdown.start();

$('#countdown').click(function() {
  countdown.extendTimer(2);
});

Thanks in advance for your help.

+4
source share
2 answers

Here's how you could do it with a little modification. Check out the JSFiddle .

var countdown;

function initializeTimer(){
    //Initialization
    countdown = $("#countdown").countdown360({
        radius: 60,
        seconds: 20,
        label: ['sec', 'secs'],
        fontColor: '#FFFFFF',
        autostart: false,
        onComplete: function () {
            //Place AJAX call here!

            //Re-start the timer once done
            initializeTimer();
            startTimer();
        }
    });

    //Call this, otherwise widget does not show up on the screen. Stop immediately after.
    countdown.start();
    countdown.stop();
}

//Manually invoke the first initialization
initializeTimer();

function startTimer(){
    countdown.start();
}

$('#countdown').click(function() {
  countdown.extendTimer(2);
});

//Start the timer on the button click
$('#start').click(function(){
    startTimer();
});

ajax onComplete.

UPDATE: .

+6

:)

:

$('#start').click(function() {
    countdown.start();
});

$('#extend').click(function() {
    countdown.extendTimer(2);
});

, ( , - 2 ).

.

EDIT: @p e p code , , , script. .

+3

All Articles