ジャバスクリプト/ jqueryの時間がカウントダウン

Question

私は、関数が純粋なJavascriptを使用して、あるいはまたなどの終了時刻までカウントダウンするjqueryの恩恵を受けてどちらかにしたいです

//consumes a javascript date object
function countDown(endtimme){
...
}

と、そのような

のようにHTMLで表示されるはず

<div id="time_left_box">
    <h1>Time remaining</h1>:

    <p>hours left: ..remaining day will be here## <p>
    <p>minutes left: ##remaining day will be here## <p>
    <p>seconds left: ##remaining day will be here## <p>
</div>

確かに、それ自体が毎秒を更新することができれば、それはさらに素晴らしいことだ。

私はJavaScriptとアプローチする方法について混乱して非常にナイーブ午前、任意のヘルプは感謝になります。

Answer 1

あなたが使用することができます jQueryのカウントダウンの

Answer 2

この1を見てみましょう： http://keith-wood.name/countdown.html

Answer 3

これは、プラグインなしではJavaScriptで行うことができます。

あなたが表示されているものよりも1小さい分母まで、現在の日付時刻を取得する必要があります。あなたの例では、これはあなたがミリ秒にすべてを降りする必要がありますを意味します。

var currentTime = new Date(n.getFullYear(), n.getMonth(), n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());

これで、今と希望時刻の差を検索します。これは、ミリ秒単位であなたに与えられています。

var diff = endtime - currentTime;

これは、あなたが秒、分、時間、日などに変換する必要がミリ秒単位で返されているので、

...これは、それぞれの分母にあるどのように多くのミリ秒単位の確立を意味します。次に、各ユニットのために必要な数を返すためにMODや除算を使用することができます。下記を参照してください。

var miliseconds = 1;
var seconds = miliseconds * 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

//Getting the date time in terms of units
//Floored so that they go together (to get just year/days/hours etc.. by themselves you need to use Math.round(diff/desired unit);
var numYears = Math.floor(diff / years);
var numDays = Math.floor((diff % years) / days);
var numHours = Math.floor((diff % days) / hours);
var numMinutes = Math.floor((diff % hours) / minutes);
var numSeconds = Math.round((diff % minutes) / seconds);

あなたはあなたが別の方法でHTMLページにこれを返すことができます表示する分母を持っていたら。たとえばます：

document.getElementById("tyears").innerHTML = numYears;

それはあなたの方法をまとめて。しかし、それが設定された間隔で実行させるために（あなたがHTML表示には、JavaScriptの関数内で更新する理由である）あなたの関数名を与えて、次の関数を呼び出し、ミリ秒単位の面であなたの間隔を提供する必要があります。

//Call the count down timer function every second (measured in miliseconds)
setInterval(countDown(endtime), 1000);