Maison > Article > interface Web > Partager comment utiliser le plug-in de minuterie de secteur jQuery pietimer

Partager comment utiliser le plug-in de minuterie de secteur jQuery pietimer

小云云original: 2017-12-31 16:55:451690parcourir

Pietimer est un plug-in de minuterie qui peut générer un changement en forme d'éventail sur la page. Il est basé 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 une fonction de rappel lorsque le timing se termine. Vous pouvez contrôler le démarrage et la pause, ce qui convient aux pages nécessitant des minuteries, telles que les examens en ligne, les comptes à rebours, les ventes à durée limitée, etc. Cet article présente principalement en détail comment utiliser le plug-in de minuterie de secteur jQuery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Les paramètres sont les suivants :

Rendu :

Le code de démonstration est le suivant :

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pietimer-基于jQuery的扇形定时器</title> 
  <style type="text/css">
    .start,.pause{display:block;margin:10px auto;background:#0ABF5D;border-radius:6px;width:100px;height:30px;line-height:30px;color:#fff;text-align:center}
    .demo{margin:20px auto;text-align:center}
  </style>
</head>
<body>
  <a class="start">start开始</a>
  <a class="pause">pause暂停</a>
  <p class="demo"></p>

  <script type="text/javascript" src="/static/lib/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="script/jquery.pietimer.min.js"></script>
  <script type="text/javascript">
  $(function(){

    $(&#39;.demo&#39;).pietimer({
      seconds: 2,
      color: &#39;rgba(10, 191, 93, 0.8)&#39;,
      height: 60,
      width: 60,
      //is_reversed: true //是否逆时针转
    },
    function(){
      //回调函数
      console.log("结束咯！");
    });

    $(&#39;.start&#39;).click(function(){
      $(&#39;.demo&#39;).pietimer(&#39;start&#39;);
      return false;
    });
    $(&#39;.pause&#39;).click(function(){
      $(&#39;.demo&#39;).pietimer(&#39;pause&#39;);
      return false;
    });

  });
  </script>
</body>
</html>

Recommandations associées :

Minuterie JS pour des effets d'animation simples

Minuterie en JavaScript Explication détaillée du réglage et de l'effacement

Explication détaillée de setTimeout() et setInterval() dans les minuteries JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partage de l'effet carrousel de la version jquery et exemples d'extension d'extensionArticle suivant：Partage de l'effet carrousel de la version jquery et exemples d'extension d'extension

Articles Liés

Voir plus