基于jQuery实现的扇形定时器附源码下载


Posted in Javascript onOctober 20, 2015

效果图如下所示:

基于jQuery实现的扇形定时器附源码下载

效果演示  源码下载

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

HTML

首先加载jquery库文件和pietimer.js文件。

<script src="jquery.min.js"></script> 
<script src="jquery.pietimer.min.js"></script>

然后我们在页面上放置一个“开始”和一个“暂停”按钮,以及用来绘制扇形图形的元素#demo,然后就是用来提示定时完成的.boom。

<p><a href="#" id="start" class="btn">开始</a> <a href="#" id="pause" class="btn">暂停</a></p> 
<p id="demo"></p> 
<p class="boom">时间到!</p>

jQuery

首先我们要在#demo中绘制扇形,通过$('#demo').pietimer()调用,参数seconds表示定时时间(秒),color表示扇形的颜色,可以通过rgba来设置,也可以使用16进制颜色值,如#FFFFFF,width和height表示扇形的半径,紧接着的回调函数表示定时完成了时触发。

$(function(){  
 $('.boom').hide();  
 $('#demo').pietimer({ 
  seconds: , 
  color: 'rgba(, , , .)', 
  height: , 
  width: 
 }, 
 function(){ 
  $('.boom').show('slow'); 
 }); 
});

当然,上面的代码是绘制了一个扇形以及定义其相关参数选项,而实际要触发定时器则需要$('#demo').pietimer('start')来调用,同样暂停则是:$('#demo').pietimer('pause'),暂停后还可以点击“开始”继续定时器。

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

以上内容是小编给大家介绍基于jQuery实现的扇形定时器附源码下载的全部内容,希望大家喜欢。

Javascript 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 #Javascript
JavaScript实现的简单烟花特效代码
Oct 20 #Javascript
require.js的用法详解
Oct 20 #Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 #Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 #Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 #Javascript
js验证身份证号有效性并提示对应信息
Oct 19 #Javascript
You might like
无限级别菜单的实现
2006/10/09 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
php分页查询的简单实现代码
2017/03/14 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
python 有效的括号的实现代码示例
2019/11/11 Python
python实现简单井字棋小游戏
2020/03/05 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
四风问题查摆材料
2014/08/25 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
师德师风自查材料
2014/10/14 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
运动会广播稿100字
2015/08/19 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android