0

これはSOに関する私の最初の質問です:)

15分カウントダウンし、閉じるボタンを表示するjQueryまたはjavascriptのタイマーが必要です。また、ユーザーがページを更新するとき、ページはリセットされるべきではありませんが、ユーザーが戻ってきたかどうかに応じて、停止したところから続行するか、カウントダウンを終了する必要があります。つまり、ユーザーが 16 分後に戻った場合、メッセージと閉じるボタンが表示されます。助言がありますか？

どうもありがとうございます！

4

3 に答える 3

2

これを試してみてください。ダウンロードしてスクリプトに含める必要があるjquery-cookieを使用し、現在のすべてのブラウザーで動作します。

/* get the time passed from the cookie, if one is set */
var count = parseInt(($.cookie('mytimeout') || 0), 10);

/* set an interval that adds seconds to the count */
var interval = setInterval(function() {
  count++;
  /* plus, you can do something you want to do every second here, 
     like display the countdown to the user */
}, 1000);

/* set a timeout that expires 900000 Milliseconds (15 Minutes) - 
   the already passed time from now */
var timeout = setTimeout(function() {
  /* put here what you want to do once the timer epires */

  /* clear the Interval */
  clearInterval(interval);
}, 900000 - count*1000);

/* before the window is reloaded or closed, store the current timeout in a cookie. 
   For cookie options visit jquery-cookie */
window.onbeforeunload = function() {
  $.cookie('mytimeout', count, { expires: 7, path: '/' });
};

これが動作することを確認するためのjsfiddleです

そして、これは開始とリセットのボタンを備えたバージョンです

ユーザーがページにいない場合でも経過時間が必要な場合は、 を使用new Date().getTime()して、1 回の訪問と次の訪問の間の経過ミリ秒を取得できます。したがって、これを変更します。

/* get the last time the user visited the page */
var lastTime = parseInt(($.cookie('timepassed') || new Date().getTime()), 10);

/* add elapsed time to the count. If the count is negative, set it to 0 */
var count = Math.max(parseInt(($.cookie('mytimeout') || 0), 10) + parseInt((new Date().getTime() - lastTime) / 1000, 10), 0);

/* set the time passed on unload */
window.onbeforeunload = function() {
  $.cookie('mytimeout', count, { expires: 7, path: '/' });
  $.cookie('timepassed', new Date().getTime(), { expires: 7, path: '/' });
};

そしてさらに別のjsfiddle

重要: これは安全ではありません。ユーザーはカウントを操作できますが、安全なスクリプトを実行する場合、js は適切なツールではありません。

アップデート

時、分、秒のバージョン

于 2013-05-14T08:26:43.827 に答える
2

これに対する解決策は次のlocalStorageとおりです。しかし、コメントを読むと、そのタイマーを非常に簡単に操作できます

ユーザーがページにいない場合、このタイマーはカウントダウンしません。彼が去ったときのカウンターの状態を覚えているだけです。しかし、あなたは基本的な考え方を知っています。あなたはDate.getTime()それを改善するために一種のシナリオを作ることができます:P

var updateTimer = function() {
    timer = localStorage.getItem('timer') || 0;
    if ( timer === 0 ) {
       $("div#timer").html("Timer is unset");
    } else {
       timer--;
       localStorage.setItem('timer', timer);
      $("div#timer").html(timer);
    }
};

$(function() {
    setInterval(updateTimer, 1000);
    $("#start").click( function() {
        localStorage.setItem('timer', 500);
    });
});

http://jsbin.com/oqamil/1/edit

于 2013-05-14T08:28:41.957 に答える
1

アンロード メソッドを使用してブラウザのデータ ストレージに時間値を永続化するための複数のオプション: - Cookies - Localstorage など

理想的な方法 - ユーザー セッション オブジェクトでサーバー上でワークフローを開始する時間を節約します。ページのリロードが発生するたびに、値/経過時間を UI に取得し、適切なメッセージを表示します

于 2013-05-14T08:26:25.663 に答える