Heim > Web-Frontend > js-Tutorial > Hauptteil

Teilen Sie mit, wie Sie das jQuery-Sektor-Timer-Plug-In Pietimer verwenden

小云云
Freigeben: 2017-12-31 16:55:45
Original
1702 Leute haben es durchsucht

Pietimer ist ein Timer-Plug-in, das eine fächerförmige Änderung auf der Seite erzeugen kann. Es basiert auf jQuery. Sie können die Timing-Zeit in Sekunden anpassen, die fächerförmige Farbe, Breite und Höhe usw. anpassen. und unterstützt eine Rückruffunktion, wenn die Zeitmessung endet. Sie können den Start und die Pause steuern, was für Seiten geeignet ist, die Timer erfordern, wie z. B. Online-Prüfungen, Countdowns, zeitlich begrenzte Verkäufe usw. Dieser Artikel stellt hauptsächlich die Verwendung des jQuery-Sektor-Timer-Plug-Ins Pietimer vor. Ich hoffe, dass er jedem helfen kann.

Die Parameter lauten wie folgt:

Rendering:

Der Democode lautet wie folgt :


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

Verwandte Empfehlungen:

JS-Timer für einfache Animationseffekte

Timer in JavaScript Detaillierte Erläuterung des Setzens und Löschens

Detaillierte Erläuterung von setTimeout() und setInterval() in JavaScript-Timern

Das obige ist der detaillierte Inhalt vonTeilen Sie mit, wie Sie das jQuery-Sektor-Timer-Plug-In Pietimer verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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