javascript - Making this timer start with a button - Stack Overflow

admin管理员组

文章数量:1429399

I found this neat countdown timer and I was curious if someone could help with a few changes to it.

1. Start on the click of a button.
2. Where would I place an AJAX call function to a PHP file for when the timer hits 0?
3. Repeat when it is finished.

The timer I found is here: /

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 any help given.

I found this neat countdown timer and I was curious if someone could help with a few changes to it.

1. Start on the click of a button.
2. Where would I place an AJAX call function to a PHP file for when the timer hits 0?
3. Repeat when it is finished.

The timer I found is here: http://jsfiddle/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 any help given.

• javascript
• php
• button
• timer

Share Improve this question Follow asked Apr 20, 2015 at 19:17 FacetiousFemmeFacetiousFemme 4911 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Here is how you could do that with just a little bit of 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();
});

You would put your code to call ajax inside the onComplete handler.

UPDATE: included code to re-start the process once plete and updated fiddle.

You nearly nailed it :)

Try that:

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

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

Now you have two buttons, and both are functioning (one to start, the other to extend the timer for 2 seconds).

Here's the working code.

EDIT: @p e p's code gives more functionality like showing counter on the screen as soon as the script loads. Would go with his suggestion.

本文标签： javascriptMaking this timer start with a buttonStack Overflow