Question

我有一段完美无瑕的代码。按下按钮时，计时器会倒计时，直到可以再次按下该按钮。

问题：当页面刷新时，它将被重置，并且必须再次点击它，然后再次进行倒计时。

目标：计时器在他们离开的任何时间开始。

我的应用程序是PHP和MySQL，如果这样做效果最好，但这是我正在使用的代码。

有谁知道我如何获得我正在寻找的功能？

JS

$('.trigger').on('click', function(e) {
    $(this).html('show')
    $('.show').slideUp('medium');
    var count = 10,
        counter = setInterval(timer, 1000);

    function timer() {
        count--;
        if (count <= 0) {
            clearInterval(counter);
            $('.trigger').html('hide');
            $('.show').slideDown('medium');
            return;
        }
        console.log(count);
        $('.timer').html(count);
    }
});

Answer 1

要实现目标，有两种方法：

Cookie或DataStorage ：如果您信任您的客户，这种方法很有用。

Cookies

JavaScript Storage

StackOverflow Example

数据库存储：您可以对后端执行ajax调用并存储用户点击。这种方法的问题在于，您必须重新发送到数据库。

jQuery.ajax

您看到所看到的内容的原因：

流程如下：

服务器端代码 - ＆gt;将数据发送到客户端 - ＆gt;浏览器开始渲染并执行JS

您已经迈出了最后一步，因为网络是无状态的，您不会将信息存储在JavaScript客户端前端。您必须执行上述操作之一才能解决此问题。

使用以下信息是为您量身定制的示例：

DEMO： jsFiddle

<强> JS

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

$('.trigger').on('click', function (e) {
    $(this).html('show')
    $('.show').slideUp('medium');
    var count = 10;
    if (readCookie("timer") != undefined) count = readCookie("timer");

    var counter = setInterval(timer, 1000);

    function timer() {
        createCookie("timer", count, 365);
        count--;
        if (count <= 0) {
            clearInterval(counter);
            $('.trigger').html('hide');
            $('.show').slideDown('medium');
            eraseCookie("timer");
            return;
        }
        console.log(count);
        console.log(readCookie("timer"));
        $('.timer').html(count);
    }
});

Answer 2

问题是Javascript不会持久化状态。它在每个页面加载时从0开始。

对于您需要的功能，您应该在点击计时器STOP按钮时保存一个cookie并在页面加载时读取它以查看它是否保存了值，然后从第二个0开始。

请参阅：http://www.quirksmode.org/js/cookies.html

Jquery Countdown Timer在页面刷新时没有重置？

2 个答案: