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鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery图片预览插件实现方法详解
Jul 18 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 翻页 实例代码
2009/08/07 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
Python与R语言的简要对比
2017/11/14 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
python中uuid模块实例浅析
2020/12/29 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
区域总监的岗位职责
2013/11/21 职场文书
语文教学随笔感言
2014/02/18 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
阿凡达观后感
2015/06/10 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript
Golang jwt身份认证
2022/04/20 Golang