グルーポン系サイトでよく見られる「終了まで○時間○分○秒」をjQueryで実装してみる

SPONSORED LINK

Pocket

ちょっと調べ物をしてコード書いたのでシェア&メモ的にエントリー。

グルーポン系サイトでよく見られる「終了までなんとか!」というカウントダウンタイマーを実装してみました。jQueryのプラグインもあるのですが、そこまででもないのでちゃちゃっと書いちゃいましたよ。

実際のコードはこんな感じですが、その前にjQueryの読み込みを忘れないようにね(最近はもっぱらGoogle様に頼りっぱなし)。

なお、HTMLの方では#TimeLeftを表示部分のIDとして指定しておきます。

<script type="text/javascript">
$(function() {
  countDown();
});
function countDown() {
var target = new Date("August 26,2010 11:00:00");
var today = new Date();
var h = Math.floor(((target-today)%(24*60*60*1000))/(60*60*1000))
var m = Math.floor(((target-today)%(24*60*60*1000))/(60*1000))%60
var s = Math.floor(((target-today)%(24*60*60*1000))/1000)%60%60
$("#TimeLeft").text(h+'時間'+m+'分'+s+'秒');
  setTimeout('countDown()', 1000);
}
</script>

もうちょっと簡単に書けそうな気がしないでもないですが、まぁ、ご参考までに。jQuery使わないでもかけそうですが、どちらにしろjQuery使っていたのでお許しをば。

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. No trackbacks yet.