webhack / ウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログ

Bootstrap + jQueryでレスポンシブ対応のカウントダウンするプラグイン

カウントダウンするプラグインはたくさんありますが、これはBootstrapで使うことを前提としたプラグインです。MITライセンスです。

f:id:tkosuga:20150705222803p:plain

使い方は以下の通りです。分かりやすくて良いですね。

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

Bare Countdown

GitHubのURL

github.com