Partager comment utiliser le plug-in de minuterie de secteur jQuery pietimer-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-31 16:55:45

original

1684 Les gens l'ont consulté

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>

Copier après la connexion

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!