jQuery를 사용하여 아름다운 원형 진행률 표시줄 카운트다운 플러그인_jquery 구현

jQuery Final Countdown은 세련된 원형 진행률 표시줄 스타일의 jQuery 카운트다운 플러그인입니다. 이 카운트다운 플러그인은 카운트다운 초, 분, 시간, 일을 표시할 수 있습니다. 원형 진행률 표시줄을 카운트다운 애니메이션으로 사용하는데, 이는 매우 세련되고 우아합니다.

온라인 미리보기 소스코드 다운로드

사용방법

이 카운트다운 플러그인은 HTML5 Canvas 라이브러리인 jQuery와 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 플러그인을 사용하면 아름다운 순환 진행률 표시줄 카운트다운을 얻을 수 있습니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다. . 매일 새로운 콘텐츠가 업데이트됩니다.