カウントダウン(jquery-yycountdown)

時間のカウントダウンについて(jsプラグイン)

システム時計の取得はこちら

デモ

※現時刻から、2030年01月01日までのカウントダウン

※開始時間、終了時間をphpで設定したりすると汎用性あるかもしれないので、下記記事のリンク貼っとく。
時間の取得(PHP)

資材について

プラグイン「jquery-yycountdown」をダウンロードします。
https://github.com/yyengine/jquery-yycountdown

HTML

<!-- 出力部分 -->
<div id="yycountdown_output"></div>

<!-- 開始終了日付の設定(HTMLタグを使う場合はこんな感じ?) -->
<div id="oddtime" title="2016/12/31 00:00:00"></div>
<div id="endtime" title="2017/12/31 00:00:00"></div>

js、cssを読み込む

jQuery本体(1.10+)の読み込みは完了しているという前提で進めます。(“jquery-1.10.2.min.js”で動作確認済み)
ダウンロードしたjs、cssを読み込ませます。

<link rel="stylesheet" href="css/jquery.yycountdown.css"/>
<script src="/js/jquery.yycountdown.min.js"></script>
<script src="/js/countdown_timer.js"></script>

JS(countdown_timer.js)について

<script type="text/javascript">
var oddtime = document.getElementById( 'oddtime' ).title;
var endtime = document.getElementById( 'endtime' ).title;

$('#yycountdown_output').yycountdown({
  startDateTime : oddtime,
  endDateTime   : endtime,
  unit          : {d: '日', h: '時間', m: '分', s: '秒'},
  complete      : function(_this){
                    _this.find('.yycountdown-box').css({color:'red'});
                  }
});
</script>