基于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实现的扇形定时器附源码下载的全部内容，希望大家喜欢。
-
本文向大家介绍基于jQuery实现选取月份插件附源码下载，包括了基于jQuery实现选取月份插件附源码下载的使用技巧和注意事项，需要的朋友参考一下 这是一个基于jQuery的可以选择年份和月份的月份拾取插件，你可以设置点击页面上的任意元素触发弹出年月选择面板，可以是一个链接也可以是一个输入框，广泛应用于月份查询，而无需设置select表单。 效果展示 源码下载 HTML 首先将m
-
本文向大家介绍基于jquery实现可定制的web在线富文本编辑器附源码下载，包括了基于jquery实现可定制的web在线富文本编辑器附源码下载的使用技巧和注意事项，需要的朋友参考一下 今天给大家介绍一款非常棒的WEB在线富文本编辑器——UMeditor，它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器，具有轻量，可定制，注重用户体验等特点，允许自由使用和修
-
本文向大家介绍基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)，包括了基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，先给大家展示下效果图，感兴趣的朋友继续往下看 哦 查看演示 源码下载 HTML 和上一篇文章：使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构，只是多了个>
-
本文向大家介绍基于Jquery实现仿百度百科右侧导航代码附源码下载，包括了基于Jquery实现仿百度百科右侧导航代码附源码下载的使用技巧和注意事项，需要的朋友参考一下 先给大家展示下效果图，看看是不是亲想要实现的效果，如果还满意的话请查看本文详情，同时大家也可以下载源码哦。 效果图： 效果展示 源码下载 代码说明: 仿百度百科右侧导航代码jquery插件，这个仿百科右侧导航js代码，在很久以
-
本文向大家介绍基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)，包括了基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)的使用技巧和注意事项，需要的朋友参考一下 先给大家展示效果图，感兴趣的朋友可以下载源码哦。 效果演示 源码下载 数字时钟可以应用在一些WEB倒计时效果、WEB闹钟效果以及基于HTML5的WEB APP中，本文将给大家介绍不借助任何图片，如
-
本文向大家介绍jQuery实现的下雪动画效果示例【附源码下载】，包括了jQuery实现的下雪动画效果示例【附源码下载】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的下雪动画效果。分享给大家供大家参考，具体如下： html部分： jquery.snow.js: 不需要css样式 主要用到：setInterval-setInterval() 方法可按照指定的周期（以毫秒计）