Minuterie de secteur implémentée sur la base de jQuery avec le code source download_jquery

Le rendu est le suivant :

Démonstration d'effet Téléchargement du code source

Pietimer est une minuterie qui peut générer un changement en forme d'éventail sur la page. Elle est basée sur jQuery et peut personnaliser le temps de synchronisation en secondes, personnaliser la couleur, la largeur et la hauteur de l'éventail, etc., et prend en charge un fonction de rappel lorsque le timing se termine. Contrôlez le démarrage et la pause, adapté aux pages qui nécessitent des minuteries, telles que les examens en ligne et les scénarios de vente à durée limitée.

HTML

Chargez d’abord le fichier de la bibliothèque jquery et le fichier pietimer.js.

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

Ensuite, nous plaçons un bouton "Démarrer" et un bouton "Pause" sur la page, ainsi que l'élément #demo pour dessiner des graphiques de fans, puis le .boom pour demander l'achèvement programmé.

<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

Nous devons d'abord dessiner un secteur dans #demo, qui est appelé via $('#demo').pietimer(). Le paramètre seconds représente le temps de synchronisation (secondes) et color représente la couleur du secteur. Il peut être défini via rgba, ou en utilisant des valeurs de couleur hexadécimales, telles que #FFFFFF, la largeur et la hauteur représentent le rayon du secteur, et la fonction de rappel suivante indique qu'elle est déclenchée lorsque le timing est terminé.

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

Bien sûr, le code ci-dessus dessine un secteur et définit ses options de paramètres associées, mais pour déclencher réellement le minuteur, vous devez appeler $('#demo').pietimer('start'), et la même pause est : $('#demo').pietimer('pause'), après la pause, vous pouvez également cliquer sur "Démarrer" pour continuer le chronomètre.

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

Le contenu ci-dessus est l'introduction de l'éditeur au fan timer basé sur jQuery avec téléchargement du code source. J'espère qu'il vous plaira.