リフレッシュ時にカウントダウンクロックがリセットされない

Question

ここでは、ページがリフレッシュされるときにリセットされるカウントダウンクロックがあります。誰かが私を助けることができたら、私はそれを感謝しますか？

以下のスクリプトを含めました。

<script type="text/javascript"> 
    var ticker = function() { 
     $("#ticker").css({ 
      left: "120%" 
     }).animate({ 
      left: "-420px" 
     }, 6000, 'linear', ticker); 
    } 

    ticker(); 
</script> 

Answer 1

ユーザーがページにないいるときに、私はJavascriptがJavascriptコードがそのことでinterperetedすなわち、ローカル側で実行されるクライアント側のスクリプト言語であることを指摘することが「実行中」する必要が考慮ブラウザ。これにより、ユーザーがページをどこかに保存していない限り、ページを更新する場合には、物事を追跡するのが難しくなります。以下のようなソリューションのための異なるアプローチが存在することができます： -

1. LocalStorage
2. Cookies
3. サーバーサイドの時計

次の3つのいずれかを使用することができます。 localstorageを使用してクロックの終了時間を保存し、ユーザーがページをリフレッシュするたびにlocalstorageから値を取得し、それに応じてクロックを開始することができます。同様のアプローチをクッキーとともに使用することができます。または、サーバー側のコードを使用して、ページをロードするたびにクロックを初期化し、それに応じてサーバーを起動させることもできます。コメントには上記のような遅れがあるかもしれません。私の意見では、javascriptを使いたい場合は、カウントダウンが0になる正確な時刻を保存するためにcookie/localstorageを使用することになります。したがって、ページにロードするたびに、保存された値を取得できますどのくらいの時間が経過していないかを取得し、それに応じて時計を設定します。

いくつかのコーディング

は、有効期限付きのクッキーを作成します。

function setCookie(cname, cvalue, exdays) { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
    var expires = "expires="+d.toUTCString(); 
    document.cookie = cname + "=" + cvalue + "; " + expires; 
} 

はクッキーを取得：

function getCookie(cname) { 
    var name = cname + "="; 
    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); 
    } 
    if (c.indexOf(name) == 0) { 
     return c.substring(name.length, c.length); 
    } 
    } 
    return ""; 
} 

使用のサンプル：

function checkCookie() { 
    var clock = getCookie("clock"); 
    if (clock != "") { 
    //You already have the cookie. Make use of it 
    } else { 
    //You still dont have the cookie, create new clock, and save cookie 
    //i.e. 
    setCookie("clock", new Date().getTime().toString(), 365); 
    } 
}