Question

我找到了这个整齐的倒数计时器，我很好奇是否有人可以帮助进行一些改动。

点击按钮开始。
当计时器命中0时，我会将AJAX调用函数放在PHP文件中？
完成后重复。

我找到的计时器在这里：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。

更新：包含代码，以便在完成并更新小提琴后重新启动该流程。

Answer 2

你几乎把它钉了下来:)。

试试：

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

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

现在你有两个按钮，两个按钮都正常工作（一个用于启动，另一个用于延长定时器2秒）。

这是工作code。

编辑：@p e p的代码提供了更多功能，例如在脚本加载后立即在屏幕上显示计数器。会有他的建议。

使用按钮启动此计时器

2 个答案: