Sharing how to use the jQuery sector timer plug-in pietimer-JS Tutorial-php.cn

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

小云云

Release： 2017-12-31 16:55:45

Original

1646 people have browsed it

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>

Copy after login

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!