カウントダウン(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>