2

問題なく動作するコードがあります。ボタンを押すと、もう一度押すまでタイマーがカウントダウンします。

問題: ページが更新されるとリセットされ、カウントダウンが再び発生する前にもう一度クリックする必要があります。

目標: 残り時間から開始するためのタイマー。

私のアプリケーションは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);
    }
});
4

2 に答える 2

1

目標を達成するには、次の 2 つの方法があります。

Cookies または DataStorage : この方法は、クライアントを信頼できる場合に適しています。

クッキー

JavaScript ストレージ

StackOverflow の例

データベース ストレージ: バックエンドに対して ajax 呼び出しを実行し、ユーザーのクリックを保存できます。この方法の問題は、毎秒データベースに再送信する必要があることです。

jQuery.ajax

あなたが見ているものを見ている理由：

プロセス フローは次のようになります。

サーバー側のコード -> クライアントにデータを送信 -> ブラウザが JS のレンダリングと実行を開始

Web はステートレスであるため、JavaScript クライアント フロント エンドに情報を保存しないため、これが最後のステップです。これを解決するには、上記のいずれかを実行する必要があります。

以下の上記の情報を使用して、あなたに合わせた例を示します。

デモ: 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);
    }
});
于 2013-07-14T00:15:00.170 に答える
0

問題は、Javascript が状態を保持しないことです。ページの読み込みごとに 0 から始まります。

必要な機能については、タイマー STOP ボタンのクリック時に Cookie を保存し、ページの読み込み時にそれを読み取って、値が保存されているかどうかを確認してから、0 秒目から開始する必要があります。

参照: http://www.quirksmode.org/js/cookies.html

于 2013-07-14T00:12:24.617 に答える