5

jQuery プラグインを使用して、Web ページにカウントダウン タイマーを配置しています。現在、タイマーの表示内容を制御するコードは次のとおりです。

<script type="text/javascript">
    var clock = $('.clock').FlipClock(3600 * 24 * 3, {
        clockFace: 'DailyCounter',
        countdown: true
    });
</script>


プラグインの JS は、 https ://github.com/objectivehtml/FlipClock/blob/master/js/flipclock/flipclock.js で確認できます。

使用中のコードのサンプル ページは、http: //flipclockjs.com/faces/daily-counterで確認できます。

現在、タイマーは 3 日間のカウントダウンで、ページが更新されるたびにリセットされます。絶対的なカウントダウンタイマーにカスタム時間を使用したい（ページの更新でリセットされない）。日付を 2013 年 9 月 30 日午後 12:00 PST (米国西部 - カリフォルニア タイム ゾーン) にします。

JavascriptまたはjQueryを使用してこれを行う方法はありますか?

4

3 に答える 3

15

現在の時刻を取得し、これがユーザーのコンピューターの時計に設定されている時刻になることに注意してください。設定されているものは何でも、特定の日付を設定してから、差を計算してプラグインに使用します。

var date  = new Date(Date.UTC(2013, 8, 30, 12, 0, 0));
var now   = new Date();
var diff  = date.getTime()/1000 - now.getTime()/1000;

var clock = $('.clock').FlipClock(diff, {
    clockFace: 'DailyCounter',
    countdown: true
});

正確な時刻については、Web サーバーを使用して現在の時刻を出力することをお勧めします。

于 2013-08-25T22:08:17.697 に答える
0

. FlipClip() の最初の引数は、カウントダウンが完了するまでの時間であると想定しています。この時間「t」は、現在と目標時間の差のはずです。

var t = targetTimeInMs - currentTimeInMs;

現在の時刻を取得するには、引数なしの Date コンストラクターを使用します。

var currentTimeInMs = new Date().getTime();

目標時間を取得するには、Date に引数を指定します。MDN からのいくつかの例を次に示します。

var today = new Date();
var birthday = new Date("December 17, 1995 03:24:00");
var birthday = new Date(1995,11,17);
var birthday = new Date(1995,11,17,3,24,0);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

. FlipClip() 関数の最初の引数としてミリ秒を指定する必要があるかどうかは正確にはわかりません。それについては、ドキュメント/ソースを参照してください。次に、Date オブジェクトの適切なメソッドを使用して、必要な単位を取得します (秒? 分? 時間? そして、date.getSeconds()、getHours() などを使用します。MDN を参照してください。)

于 2013-08-25T22:18:56.380 に答える