jQuery を使用して美しい円形のプログレス バー カウントダウンを実装する plug-in_jquery

jQuery Final Countdown は、スタイリッシュな円形プログレス バー スタイルの jQuery カウントダウン プラグインです。このカウントダウン プラグインは、秒、分、時間、日のカウントダウンを表示できます。円形のプログレスバーをカウントダウンアニメーションとして使用しており、非常にファッショナブルでエレガントです。

オンライン プレビュー ソース コードのダウンロード

使用方法

このカウントダウン プラグインは、jQuery と HTML5 Canvas ライブラリである KineticJS に依存しています。使用はそれらを紹介することです。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kinetic.js"></script>
<script type="text/javascript" src="js/jquery.final-countdown.js"></script>

HTML 構造

このカウントダウンプラグインのHTML構造は、レイアウトを容易にするため、フレームワークとしてBootstrapを使用しています。

<div class="countdown countdown-container container">
 <div class="clock row">
  <div class="clock-item clock-days countdown-time-value col-sm- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-days" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></p>
      <p class="type-days type-time">DAYS</p>
     </div><!-- /.text -->
    </div><!-- /.inner -->
   </div><!-- /.wrap -->
  </div><!-- /.clock-item -->
  <div class="clock-item clock-hours countdown-time-value col-sm- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-hours" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></p>
      <p class="type-hours type-time">HOURS</p>
     </div><!-- /.text -->
    </div><!-- /.inner -->
   </div><!-- /.wrap -->
  </div><!-- /.clock-item -->
  <div class="clock-item clock-minutes countdown-time-value col-sm- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-minutes" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></p>
      <p class="type-minutes type-time">MINUTES</p>
     </div><!-- /.text -->
    </div><!-- /.inner -->
   </div><!-- /.wrap -->
  </div><!-- /.clock-item -->
  <div class="clock-item clock-seconds countdown-time-value col-sm- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-seconds" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></p>
      <p class="type-seconds type-time">SECONDS</p>
     </div><!-- /.text -->
    </div><!-- /.inner -->
   </div><!-- /.wrap -->
  </div><!-- /.clock-item -->
 </div><!-- /.clock -->
</div><!-- /.countdown-wrapper --> 

上記のコードは非常にシンプルで、jQuery Final Countdown プラグインを使用すると、この記事が皆様のお役に立てば幸いです。今後ともこのサイトにご注目ください。 . 毎日新しいコンテンツが更新されます。