基于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 相关文章推荐
浅谈JavaScript的事件
Feb 27 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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
php读取目录所有文件信息dir示例
2014/03/18 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python获取本机外网ip的方法
2015/04/15 Python
python爬虫之百度API调用方法
2017/06/11 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Django实现文件上传下载功能
2019/10/06 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
python中rb含义理解
2020/06/18 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
护理中职生求职信范文
2014/02/24 职场文书
车辆转让协议书
2014/04/15 职场文书
活动总结报告格式
2014/05/09 职场文书
工程项目经理任命书
2014/06/05 职场文书
作风大整顿心得体会
2014/09/10 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android