保存されている時間が変数にある場合のカウントダウンタイマーを作成する

Question

JavaScriptに時間を格納する変数があります。たとえば、durationは、14分または1時間20分のような時間を分および時間で格納する変数です。 JavaScriptでこの変数を使用してカウントダウンタイマーを作成するにはどうすればよいですか？

Answer 1

正規表現で目的の値を抽出し、setInterval()を使用して定期的にタイマーを更新する関数を呼び出す方法があります。

次の式では、あなたのパターンに一致します。

/^\s*(?:(\d+)\s+hour(?:s)?\s*)?(\d+)\s+minute(?:s)?$/i 

最初のキャプチャグループはあなたの時間を分単位で時間数と第二1を与えます。 matchメソッドのおかげでアクセスできます。 1つのマッチで1つのアイテムとの一致が含まれる配列が返されます（一致するものが見つからない場合はnull）。

あなたは、その後、それぞれ、時間数と、あなたが待機する時間を与えるだろう、この

time = "1 hour 10 minute"; 
match = time.match(/^\s*(?:(\d+)\s+hour(?:s)?\s*)?(\d+)\s+minute(?:s)?$/i); 

if(match) 
{ 
    h = (match[1] === undefined) ? 0 : match[1]; // The number of hours 
    m = (match[2] === undefined) ? 0 : match[2]; // The number of minutes 
} 

のような分のmunberをhとmを得ることができます。あなたは簡単にミリ秒に変換（なぜならそのもっと便利）、それは0

setInterval()あなたが関数を呼び出すことができるようにjavascript関数（あなたの更新機能）ごとXミリ秒に到達するまでそれを例えばごとに秒を更新することができます。この関数は、保存して後でclearInterval()関数に渡して、以前に設定したタイマーをクリアする識別子を返します。

interval = h * 3600000 + m * 60000; // the interval in ms 
stopTime = new Date((new Date()).getTime() + interval); // when to stop counting 

counter = setInterval(count, 1000); 

あなたcount機能は、単に、現在の時刻を取得間隔を更新し、この1つは低いか、またはタイマーを停止させるために0に等しいかどうかを確認する必要があります。

function count() 
{ 
    now  = new Date(); 
    interval = Math.max(0, stopTime.getTime() - now.getTime()); 

    if(interval <= 0) clearInterval(counter); 
} 

Here is an example of such a timer.