今年も残すところ一か月足らず、2015年までもう少しですね。
こんな時に使いたくなるのが、そうカウントダウンタイマーです。キャンペーンサイトなんかには欠かせませんね。
このカウントダウンタイマーを設置するのは、昔ならFlashを使うことが多かったのですが、最近はスマホ、タブレットなどのデバイスが増えてきてJavascriptで代用するというのが傾向になりつつあります。
Javascriptで格好いい、カウントダウンタイマーが無いかな～と探していたらありました！
flipCountDownというJqueryで動くカウントダウンタイマーです。
http://xdsoft.net/jqplugins/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'
});
});
これで動かすことができます。
ぜひ使ってみてください！