Bootstrap + jQueryでレスポンシブ対応のカウントダウンするプラグイン
カウントダウンするプラグインはたくさんありますが、これはBootstrapで使うことを前提としたプラグインです。MITライセンスです。
使い方は以下の通りです。分かりやすくて良いですね。
jQuery(window).load(function () { $('#countdown').countdown("2015/10/10", function (event) { $(this).find("#days").html(event.strftime("%D")); $(this).find("#hours").html(event.strftime("%H")); $(this).find("#minutes").html(event.strftime("%M")); $(this).find("#seconds").html(event.strftime("%S")); }); });
<div class="container"> <!-- CountDown block - Days --> <div id="countdown" class="row"> <div class="col-xs-6 col-sm-3 countdown-item"> <p id="days" class="countdown"></p> <p class="countdown-description">Days</p> </div> <!-- CountDown block - Hours --> <div class="col-xs-6 col-sm-3 countdown-item countdown-item-xs-last"> <p id="hours" class="countdown"></p> <p class="countdown-description">Hours</p> </div> <!-- CountDown block - Minutes --> <div class="col-xs-6 col-sm-3 countdown-item"> <p id="minutes" class="countdown"></p> <p class="countdown-description">Minutes</p> </div> <!-- CountDown block - Seconds --> <div class="col-xs-6 col-sm-3 countdown-item countdown-item-last"> <p id="seconds" class="countdown"></p> <p class="countdown-description">Seconds</p> </div> </div>
デモサイトURL
GitHubのURL