Question

$(function(){
var $btn = $('#sendPush');
$btn.click(function(){
    var $this = $(this);
        $this.attr('disabled', 'disabled').html("Sent");        
    $("#countdownOne").countdown360({
        radius      : 40,
        seconds     : 10,
        fontColor   : '#FFFFFF',
        autostart   : false,
        onComplete  : function () { $("#countdownOne").fadeOut();}
    }).start();
    setTimeout(function () {
            $this.removeAttr('disabled').html('Send Now');
        }, 10);  
    });
});

我想倒计时功能仍在倒计时，按钮立即发送以在页面刷新后保持禁用状态。我已将其包含在脚本https://github.com/carhartl/jquery-cookie中。感谢。

Answer 1

这是一个JavaScript Cookie库：https://github.com/js-cookie/js-cookie

以下是一些符合您要求的代码：http://jsfiddle.net/xf4at72w/16/

您正在查看的倒数计时器并不具备一些关键功能。 1）它不允许您指定总秒数与开始秒数。 2）启动后不允许更新。你可以分叉JavaScript库并添加你需要的API方法......

这是开始倒计时并在cookie中记录开始时间的方法：

$('#start').click(function(){
    // Record current time as JavaScript ticks
    Cookies.set('timer', (new Date()).getTime(), { expires: 7 });

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

以下是在刷新Web浏览器后读取cookie并启动计时器的代码...

if(+Cookies.get('timer') > 0) {
    // Read the start time as JavaScript ticks
    var start = new Date(+Cookies.get('timer'));
    var now = new Date();
    var seconds = getSeconds(now, start);
    seconds = 20 - seconds;
    if(seconds > 0) {
        countdown = $("#countdown").countdown360({
            radius: 40,
            seconds: seconds,
            label: ['sec', 'secs'],
            fontColor: '#FFFFFF',
            autostart: false,
            onComplete: function () {
                Cookies.set('timer', null);
                console.log('done');
            }
        });
        countdown.start();
    }
}

页面刷新后保持功能和按钮的值

1 个答案: