0

カウントダウンタイマーを作ってみました。なんとか作成できましたが、これの問題は、ブラウザを閉じると停止することです。そのため、ユーザーがサイトに再度アクセスすると、再び再起動します。私が欲しいのは、そのタイマーを維持することです。たとえば、ユーザーがタイマー 22:14:09 にサイトを離れた場合。したがって、タイマーは続行します。ユーザーが 1 時間後に私のサイトに再度アクセスした場合、時間は 21:14:09 になるはずです。 どうやってやるの？

ここに私のJSがあります

$(function () {
var hrs, mins, secs, TimerRunning, TimerID,
    Timer = {
        init: function () {
            hrs          = 23;
            mins         = 59;
            secs         = 59;
            TimerRunning = false;
            Timer.StopTimer();
            Timer.StartTimer();
         },

         StopTimer: function () {
            if(TimerRunning)
               clearTimeout(TimerID);
            TimerRunning=false;
         },

         StartTimer: function () {
            TimerRunning = true;
            $('.timer').html(Timer.Pad(hrs) + ":" + Timer.Pad(mins) + ":" + Timer.Pad(secs));
            TimerID = self.setInterval("StartTimer()", 1000);

            if(hrs == 0 && mins == 0 && secs == 0)
               StopTimer();

            if (secs == 0) {
               mins--;
               secs = 59;
            }
            if (mins == 0) {
                hrs--;
                mins = 59;
            }
            secs--;
            setTimeout(function () { Timer.StartTimer(); }, 1000);
         },

         Pad: function (number) {
            if(number < 10)
               number = 0+""+number;
            return number;
         }

    };

Timer.init();
});

アップデート

デモ

4

3 に答える 3

1

これがこの問題に対する私の解決策です。

// use hours, minutes & seconds to set time limit
var hours = 1, 
    minutes = 30, 
    seconds = 0,
    maxTime =  ( ( hours * 3600 ) + ( minutes * 60 ) + seconds ) * 1000,
    // if timeleft not in localStorage then default to maxTime
    timeLeft = ( localStorage.timeLeft || maxTime ),
    startTime = new Date(),
    intervalRef;

// check if user has already used up time
if( timeLeft > 0 ) {

    intervalRef = setInterval( setTimeLeft, 5000 );
} else {

    stopTrackingTime();
}

function setTimeLeft( ) {

    // if user has used up time exit
    if( localStorage.timeLeft < 0 ) {

        stopTrackingTime();
    }

    // calculate how long user has left
    var elapsed = ( new Date() - startTime );
    localStorage.timeLeft = timeLeft - elapsed;
};

// function called once user has used up time
function stopTrackingTime( ) {

    clearInterval( intervalRef );
    alert( "end of time allowed" );
}

ここでフィドル

于 2012-10-31T11:49:32.157 に答える
0

StartTimer 関数を変更して、呼び出されるたびにローカル タイム スタンプ ( new Date) が Cookie または localStorage に保存されるようにすることができます。さらに、setTimeout はあまり信頼できないため、時々リアルタイムで時間カウントを調整する必要があります。

于 2012-10-31T08:31:11.847 に答える
0

に時間を保存でき、LocalStorageブラウザの再起動後も保持されます。

あなたの場合、次のような単純なもの

localStorage["mytimer"] = JSON.stringify([hrs, mins, secs]);

ストレージで機能する必要があり、実行できます

var previousTime = JSON.parse(localStorage["mytimer"]);

前の値を取得します。

詳しくはhttp://diveintohtml5.info/storage.htmlをご覧ください。

于 2012-10-31T08:05:03.933 に答える