Sektor-Timer basierend auf jQuery mit Quellcode download_jquery implementiert

Die Darstellung ist wie folgt:

Effektdemonstration Quellcode-Download

Pietimer ist ein Timer, der eine fächerförmige Änderung auf der Seite generieren kann. Er basiert auf jQuery und kann die Timing-Zeit in Sekunden anpassen, die fächerförmige Farbe, Breite und Höhe usw. anpassen und unterstützt a Rückruffunktion, wenn die Zeitmessung endet, geeignet für Seiten, die Timer erfordern, wie z. B. Online-Prüfungen und zeitlich begrenzte Verkaufsszenarien.

HTML

Laden Sie zuerst die JQuery-Bibliotheksdatei und die Datei Pietimer.js.

<script src="jquery.min.js"></script> 
<script src="jquery.pietimer.min.js"></script> 

Dann platzieren wir einen „Start“- und einen „Pause“-Button auf der Seite sowie das Element #demo zum Zeichnen von Fangrafiken und dann die .boom-Datei, um zur geplanten Fertigstellung aufzufordern.

<p><a href="#" id="start" class="btn">开始</a> <a href="#" id="pause" class="btn">暂停</a></p> 
<p id="demo"></p> 
<p class="boom">时间到！</p> 

jQuery

Zuerst müssen wir einen Sektor in #demo zeichnen, der über $('#demo').pietimer() aufgerufen wird. Der Parameter seconds repräsentiert die Zeit (Sekunden) und color repräsentiert die Farbe des Sektors. Es kann über rgba oder mithilfe hexadezimaler Farbwerte wie #FFFFFF festgelegt werden. Breite und Höhe stellen den Radius des Sektors dar, und die nachfolgende Rückruffunktion zeigt an, dass sie ausgelöst wird, wenn das Timing abgeschlossen ist.

$(function(){  
 $('.boom').hide();  
 $('#demo').pietimer({ 
  seconds: , 
  color: 'rgba(, , , .)', 
  height: , 
  width: 
 }, 
 function(){ 
  $('.boom').show('slow'); 
 }); 
}); 

Natürlich zeichnet der obige Code einen Sektor und definiert die zugehörigen Parameteroptionen, aber um den Timer tatsächlich auszulösen, müssen Sie $('#demo').pietimer('start') aufrufen, und die gleiche Pause ist : $('#demo').pietimer('pause'), nach dem Anhalten können Sie auch auf „Start“ klicken, um den Timer fortzusetzen.

$(function(){  
 $('a#start').click(function(){ 
  $('.boom').hide(); 
  $('#demo').pietimer('start'); 
  return false; 
 }); 
 $('a#pause').click(function(){ 
  $('#demo').pietimer('pause'); 
  return false; 
 });  
}); 

Der obige Inhalt ist die Einführung des Herausgebers in den auf jQuery basierenden Fan-Timer mit Quellcode-Download. Ich hoffe, er gefällt Ihnen.