Cookieを使用したカウントダウンタイマー

StackOverflow https://stackoverflow.com/questions/3121929

  •  30-09-2019
  •  | 
  •  

質問

このようなトピックがたくさんあることは知っていますが、答えが見つからなかった問題があります。私のスクリプトは次のとおりです。

window.onload = function(){
    // 200 seconds countdown
    var countdown = 14400; 
    //current timestamp
    var now   = Date.parse(new Date());

    //ready should be stored in your cookie
    if ( !document.cookie )
    {
        document.cookie = Date.parse(new Date (now + countdown  * 1000)); // * 1000 to get ms
    }

    //every 1000 ms
    setInterval(function()
    {
        var diff = ( document.cookie - Date.parse(new Date()) );

        if ( diff > 0 )
        {
            var message = diff/1000 + " seconds left";
        }
        else
        {
            var message = "finished";
        }

        document.body.innerHTML = message;

    },1000);
}

Cookieの価値に応じて、ユーザーがどれだけ残っているかをユーザーに伝えるカウントダウンタイマーを作りたいです。これまでのところ、2つの値の違いを計算することができましたが、「DD/MM/YY HH：MM：SS」のような形式を作成する方法がわかりません。まったく可能ですか？

役に立ちましたか？

解決

あなたが望むのは、（ミリ）秒の違いを次のようなものに変換する関数です

5D 4H 3M 2S

数ヶ月>数か月間、多数の日があることを気にしないなら、次のようなものを使用できます。

function human_time_difference(diff) {
    var s = diff % 60; diff = Math.floor(diff / 60);
    var min = diff % 60; diff = Math.floor(diff / 60);
    var hr = diff % 24; diff = Math.floor(diff / 24);
    var days = diff;

    return days + 'd ' + hr + 'h ' + min + 'm ' + s + 's';
}

Milisecondsの違いがある場合は、その数を1000で割ると渡す必要があります。Math.Roundを使用して分数を取り除くこともできますが、その情報を表示したい場合は、そのままにしておくことができます。

数ヶ月と数年を得ることは、いくつかの理由で少し難しいです：

  1. 月の日数は異なります。
  2. 1か月の半ばから次の月の半ばに行くとき、31日以上の日数（例：6月2日から6月からかけて何ヶ月があるかがあっても、時間全体をカバーしません。 7月30日??）。

2倍の月数が本当に必要な場合、それらの間の秒数で十分ではありません。カレンダーロジックを使用する必要があります。これには、開始日と終了日 +時間を渡す必要があります。

PS：質問を投稿するときは、無関係な詳細を避けてください。たとえば、あなたの質問は、Cookie、SetInterval、またはOnloadハンドラーとは何の関係もありません。あなたが知らない唯一の部分は、（Mili）秒から日、時間などを変換する方法です。何かをしようとしている理由の背景を提供すると役立つかもしれませんが、理解することが不可欠ではない場合基本的な質問、それを最後に置いて、人々が本質的な部分に到達する前にそれを通り抜ける必要がないようにしてください。あなたのタイトルにも同じアドバイスが当てはまります。無関係な詳細を除外して、関連性があることを確認してください（例：Cookieやカウントダウン）。

他のヒント

JavaScriptには、PHPを行った場合に期待されるような日付のフォーマットメソッドが組み込まれていません。代わりに、文字列を手動で作成する必要があります。ただし、この目的に役立つ多くのゲッターメソッドがあります。見る JavaScriptを使用して日付をフォーマットする10の方法.

また、あなたが知っているように。 Date.parse タイムスタンプのミリ秒部分を返さない（丸くなります）。ミリ秒が必要な場合は、次のいずれかを行うことができます

var d = new Date();
var timestamp_ms = Date.parse(d) + d.getMilliseconds();

あるいは単に

var timestamp_ms = +d;

  1. なぜあなたがクッキーをチェックするのかわかりません if ( !document.cookie ) しかし、それは私のブラウザで動作しないので、私はそれを変更しました if ( document.cookie )

  2. ToString機能などをお試しください。 JavaScript Date Object Referenceでそれらを調べます。例えば、 

            var t = new Date;
    t.setTime(diff);
    var message = t.toTimeString() + " seconds left";

これは印刷されます 11:59:58 seconds left 私のブラウザで。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top