グルーポン系サイトでよく見られる「終了まで○時間○分○秒」をjQueryで実装してみる
- August 13th, 2010
- Posted in jQuery関連 . 開発ツール・技術
- Write comment
ちょっと調べ物をしてコード書いたのでシェア＆メモ的にエントリー。
グルーポン系サイトでよく見られる「終了までなんとか！」というカウントダウンタイマーを実装してみました。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使っていたのでお許しをば。
No comments yet.