メールでのお問い合わせはこちら、お問い合わせフォーム

flipCountDown カウントダウンタイマー

[ 2014年12月02日 ]

今年も残すところ一か月足らず、2015年までもう少しですね。

こんな時に使いたくなるのが、そうカウントダウンタイマーです。キャンペーンサイトなんかには欠かせませんね。

このカウントダウンタイマーを設置するのは、昔ならFlashを使うことが多かったのですが、最近はスマホ、タブレットなどのデバイスが増えてきてJavascriptで代用するというのが傾向になりつつあります。

Javascriptで格好いい、カウントダウンタイマーが無いかな~と探していたらありました!

flipCountDownというJqueryで動くカウントダウンタイマーです。

http://xdsoft.net/jqplugins/flipcountdown/

flipCountDown


こんな感じのカウントダウンタイマーを作ることができます。

最初にプラグインを読み込みます。

<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.flipcountdown.js"></script>
<link rel="stylesheet" type="text/css" href="/jquery.flipcountdown.css" />

divのエレメントを追加します。

<div id="flipcountdownbox1"></div>

flipcountdownを初期化します。

jQuery(function(){
  jQuery('#flipcountdownbox1').flipcountdown();
})

各種設定がありますが、新年へのカウントダウンはこんな感じです。

jQuery(function(){
 jQuery('#new_year').flipcountdown({  
  size:'lg',
  beforeDateTime:'1/01/2015 00:00:01'
 });
});

これで動かすことができます。

ぜひ使ってみてください!