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读取本地的json文件(实例讲解)
Oct 31 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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
域名查询代码公布
2006/10/09 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
JavaScript函数详解
2014/11/17 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
python使用配置文件过程详解
2019/12/28 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
python设置环境变量的作用整理
2020/02/17 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
巾帼标兵事迹材料
2014/12/26 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
学校少先队工作总结
2015/08/12 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python