[jQuery] カウントダウンタイマーjQuery.yycountdown

簡単にカウントダウンタイマーが設置できるプラグイン。

jQuery.yycountdown配布ページから本体をダウンロードし、フォルダ内の必要なファイルを設置します。

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.yycountdown.min.js" type="text/javascript"></script>

本家サイトのサンプルではjquery.yycountdown.cssを読んできていますが、こちらはなくても動作には影響ないです。

JavaScriptの記述

$('#timer').yycountdown({
    startDateTime : '2015/12/16 00:00:00',//開始
    endDateTime : '2015/12/25 23:59:59',//終了
    unit : {d: '日', h: '時間', m: '分', s: '秒'},//単位
    complete : function(_this){//カウントダウン終了時の表示
                 _this.find('.yycountdown-box').css({color:'red'});
               }
  });

htmlの記述

<div id="timer"></div>

実行時

<div id="timer">
	<div class="yycountdown-box">
	<span class="yyc-day">9</span>
	<span class="yyc-day-text">日</span>
	<span class="yyc-hou">23</span>
	<span class="yyc-hou-text">時間</span>
	<span class="yyc-min">59</span>
	<span class="yyc-min-text">分</span>
	<span class="yyc-sec">34</span>
	<span class="yyc-sec-text">秒</span>
	</div>
</div>

参考リンク