欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

基于jQuery的扇形按时器

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

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: 60,
		color: 'rgba(0, 0, 0, 0.8)',
		height: 100,
		width: 100
	},
	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;
	});
		
});

更多详情请参考Pietimer项目官网:https://github.com/knorthfield/pietimer/

本文地址:http://itbyc.com/web/javascript/13206.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1