Bigegg Lab

2010年 8月 13日

グルーポン系サイトでよく見られる「終了までなんとか！」というカウントダウンタイマーを実装してみました。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使っていたのでお許しをば。

グルーポン系サイトでよく見られる「終了まで○時間○分○秒」をjQueryで実装してみる - IDEA*IDEA ～ 百式管理人のライフハックブログ

1年前 | 固定リンク | 2010年 8月 13日 |