jQueryで時差を意識したカウントダウンタイマー

KIMG0615

このアイキャッチは前職のデスクですね。もはや懐かしい・・・。

さて、アイスブレイクはこの辺にして、さっそく本題に入っていきます。「セレクタに残りの日数・時間・分・秒を表示するjQuery」です。

書いてあるコードが全てなのですが、簡単に注釈を入れます。

これは「日数」を表示する場所に「id=”c_d”」というセレクタ、「時間」を表示する場所に「id=”c_h”」というセレクタ、「分」を表示する場所に「id=”c_m”」というセレクタ、「秒」を表示する場所に「id=”c_s”」というセレクタをHTML側で設定してあることを想定しています。つまり、装飾したDOMはHTML側で用意しておいて、その決められた枠の中身を書き換えていくという方法です。

1秒ごとに終わりの時間を入れてしまっているので、これはsetIntervalの外に出してしまっても良いかもしれません。あとは、setIntervalの戻り値(タイマー変数)を受け取っておけば、中の条件で(「例えば時間が過ぎていたらカウントダウンしない」など)タイマーをとめることができるので、手直しをしたほうがいいかもしれません。

提示のコードでテストした後に、本番用に書き換えてそれでテストをしたので、上記の改良点をいれた汎用レベルの高いテスト済みのコードはありません。適宜書き換えてテストをしてみてください。

ポイントは「toUTCString」と終了時刻の設定方法です。時差を含めた値を設定することで、世界標準時にうまく変換することができます。そして、世界標準時同士で比較をおこなって、その差を書き出しています。

  • このエントリーをはてなブックマークに追加

水蕗をフォローする

コメントを残す