jQuery扇形定时器插件pietimer使用方法详解


Posted in jQuery onJuly 18, 2017

Pietimer是一个可以在页面上生成一个扇形变化的定时器插件,它基于jQuery,可以自定义定时时间秒数,自定义扇形的颜色、宽度和高度等,并且支持定时结束时回调函数,可以控制开始和暂停,适用于需要定时器的页面如在线考试、倒计时,限时抢购等场景。

参数如下:

jQuery扇形定时器插件pietimer使用方法详解

demo地址: http://test.ixiewei.com/pietimer/

效果图:

jQuery扇形定时器插件pietimer使用方法详解

demo代码如下:

<!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>
  <div class="demo"></div>

  <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(){

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

    $('.start').click(function(){
      $('.demo').pietimer('start');
      return false;
    });
    $('.pause').click(function(){
      $('.demo').pietimer('pause');
      return false;
    });

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

git地址:https://github.com/knorthfield/pietimer/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 #jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 #jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 #jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 #jQuery
jQuery常用选择器详解
Jul 17 #jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 #jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 #jQuery
You might like
PHP自定义函数收代码
2010/08/01 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python表示矩阵的方法分析
2017/05/26 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
购房意向书
2014/08/30 职场文书
解约证明模板
2015/06/19 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
手写实现JS中的new
2021/11/07 Javascript