使用按钮启动此计时器

Question

我发现这个整齐的倒数计时器,我很好奇,如果有人可以帮助进行一些改动.

1. 从单击按钮开始.
2. 当计时器达到0时,我会将AJAX调用函数放在PHP文件中？
3. 完成后重复.

我发现的计时器在这里: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);
});

提前感谢您提供的任何帮助.

Answer 1

这是你如何通过一点点修改来做到这一点.看看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();
});

您可以将代码调用到onComplete处理程序中的ajax .

更新:包含代码,以便在完成并更新小提琴后重新启动该过程.