Home > Article > Web Front-end > Sharing how to use the jQuery sector timer plug-in pietimer

Sharing how to use the jQuery sector timer plug-in pietimer

小云云Original: 2017-12-31 16:55:451684browse

Pietimer is a timer plug-in that can generate a fan-shaped change on the page. It is based on jQuery and can customize the timing time in seconds, customize the fan-shaped color, width and height, etc., and supports a callback function when the timing ends. You can control the start and pause, which is suitable for pages that require timers, such as online exams, countdowns, limited-time sales, etc. This article mainly introduces in detail how to use the jQuery sector timer plug-in pietimer. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The parameters are as follows:

Rendering:

The demo code is as follows:

<!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>

Related recommendations:

js timer to implement simple animation effects

Timer settings in JavaScript Detailed explanation of setTimeout() and setInterval() in JavaScript timer

The above is the detailed content of Sharing how to use the jQuery sector timer plug-in pietimer. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sharing of jquery version carousel effect and extend extension examplesNext article：Sharing of jquery version carousel effect and extend extension examples

See more

Sharing how to use the jQuery sector timer plug-in pietimer

Related articles