Gunakan jQuery untuk melaksanakan pekeliling yang cantik undur bar kemajuan plug-in

Gunakan jQuery untuk melaksanakan pekeliling yang cantik undur bar kemajuan plug-in_jquery

WBOY

Lepaskan： 2016-05-16 15:37:28

asal

2442 orang telah melayarinya

JQuery Final Countdown ialah pemalam undur jQuery gaya bar kemajuan pekeliling yang bergaya. Pemalam undur ini boleh memaparkan detik, minit, jam dan hari undur detik. Ia menggunakan bar kemajuan bulat sebagai animasi undur, yang sangat bergaya dan elegan.

Pratonton dalam talian Muat turun kod sumber

Cara menggunakan

Pemalam undur ini bergantung pada jQuery dan KineticJS - perpustakaan Kanvas HTML5. Penggunaannya adalah untuk memperkenalkan mereka.

<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>

Salin selepas log masuk

Struktur HTML

Struktur HTML pemalam undur ini menggunakan struktur HTML berikut Untuk memudahkan reka letak, Bootstrap digunakan sebagai rangka kerja.

<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 -->

Salin selepas log masuk

Kod di atas sangat mudah untuk menggunakan pemalam Pengiraan Akhir jQuery untuk mencapai undur bar kemajuan bulat yang indah Saya harap artikel ini akan membantu semua orang . Terdapat yang baharu setiap hari.