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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 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生成缩略图的类代码
2008/10/02 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python正则表达式指南 推荐
2018/10/09 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
python调用摄像头的示例代码
2020/09/28 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
物理系毕业生自荐书
2014/06/13 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书