Heim > Web-Frontend > js-Tutorial > Hauptteil

Verwenden Sie jQuery, um ein schönes kreisförmiges Fortschrittsbalken-Countdown-Plug-in_jquery zu implementieren

WBOY
Freigeben: 2016-05-16 15:37:28
Original
2404 Leute haben es durchsucht

jQuery Final Countdown ist ein stilvolles jQuery-Countdown-Plug-in im kreisförmigen Fortschrittsbalkenstil. Dieses Countdown-Plug-in kann Countdown-Sekunden, Minuten, Stunden und Tage anzeigen. Es verwendet einen kreisförmigen Fortschrittsbalken als Countdown-Animation, was sehr modisch und elegant ist.

Online-Vorschau Quellcode-Download

So verwenden Sie

Dieses Countdown-Plugin basiert auf jQuery und KineticJS – einer HTML5 Canvas-Bibliothek. Der Nutzen besteht darin, sie vorzustellen.

<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>
Nach dem Login kopieren

HTML-Struktur

Die HTML-Struktur dieses Countdown-Plug-Ins verwendet die folgende HTML-Struktur. Um das Layout zu erleichtern, wird Bootstrap als Framework verwendet.

<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 --> 
Nach dem Login kopieren

Der obige Code ist sehr einfach, um einen schönen kreisförmigen Fortschrittsbalken-Countdown zu erzielen. Bitte beachten Sie diese Website weiterhin . Es gibt jeden Tag neue Inhalte.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage