このアイキャッチは前職のデスクですね。もはや懐かしい・・・。
さて、アイスブレイクはこの辺にして、さっそく本題に入っていきます。「セレクタに残りの日数・時間・分・秒を表示するjQuery」です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
jQuery(function($){ setInterval(function(){ var startDateTime = new Date(); startDateTime.toUTCString(); var endDateTime = new Date('2018-04-27 09:00:00+09:00'); endDateTime.toUTCString(); var left = endDateTime - startDateTime; var d_msec = 24 * 60 * 60 * 1000; var d = Math.floor(left / d_msec); var h = Math.floor((left % d_msec) / (60 * 60 * 1000)); var m = Math.floor((left % d_msec) / (60 * 1000)) % 60; var s = Math.floor((left % d_msec) / 1000) % 60 % 60; $('#c_d').html(d); $('#c_h').html(h); $('#c_m').html(m); $('#c_s').html(s); },1000); }); |
書いてあるコードが全てなのですが、簡単に注釈を入れます。
これは「日数」を表示する場所に「id=”c_d”」というセレクタ、「時間」を表示する場所に「id=”c_h”」というセレクタ、「分」を表示する場所に「id=”c_m”」というセレクタ、「秒」を表示する場所に「id=”c_s”」というセレクタをHTML側で設定してあることを想定しています。つまり、装飾したDOMはHTML側で用意しておいて、その決められた枠の中身を書き換えていくという方法です。
1秒ごとに終わりの時間を入れてしまっているので、これはsetIntervalの外に出してしまっても良いかもしれません。あとは、setIntervalの戻り値(タイマー変数)を受け取っておけば、中の条件で(「例えば時間が過ぎていたらカウントダウンしない」など)タイマーをとめることができるので、手直しをしたほうがいいかもしれません。
提示のコードでテストした後に、本番用に書き換えてそれでテストをしたので、上記の改良点をいれた汎用レベルの高いテスト済みのコードはありません。適宜書き換えてテストをしてみてください。
ポイントは「toUTCString」と終了時刻の設定方法です。時差を含めた値を設定することで、世界標準時にうまく変換することができます。そして、世界標準時同士で比較をおこなって、その差を書き出しています。