簡単にカウントダウンタイマーが設置できるプラグイン。
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>