当前位置: 代码迷 >> Web前端 >> jquery记时插件
  详细解决方案

jquery记时插件

热度:266   发布时间:2012-10-25 10:58:57.0
jquery倒计时插件

调用方法:

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title><!--http://www.cssrain.cn/demo/jquery-ui-tab/jquery-1.3.1.js-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="time.js" type="text/javascript"></script>
<script>
$(function(){
/*****  测试1  ****/
// 开始 && 重新开始
$("#start").click(function(){
	$("#test").CRcountDown({
				startNumber:15,
				callBack:test
			})
			.css("color","red");
});
// 暂停
$("#pause").click(function(){
	$("#test").pause();
});
// 暂停后 重新开始
$("#again").click(function(){
	$("#test").reStart();
});
function test(){
	$("<p>1</p>")
			  .hide()
			  .fadeIn(1000)
			  .appendTo("body");
}

/*****  测试2  ****/
// 开始 && 重新开始
$("#start2").click(function(){
	$("#test2").CRcountDown({
				startNumber:10,
				callBack:test2
			})
			.css("color","blue");
});
// 暂停
$("#pause2").click(function(){
	$("#test2").pause();
});
// 暂停后 重新开始
$("#again2").click(function(){
	$("#test2").reStart();
});
function test2(){
	$("<p>2</p>")
			  .hide()
			  .fadeIn(1000)
			  .appendTo("body");
}

})
</script>
</head>
<body>
<h1>测试1:</h1>
<button id="start" >开始&&重新开始</button>
<button id="pause" >暂停</button>
<button id="again" >暂停后 重新开始</button>
<div id="test" ></div>

<br/>
<h1>测试2:</h1>
<button id="start2" >开始&&重新开始</button>
<button id="pause2" >暂停</button>
<button id="again2" >暂停后 重新开始</button>
<div id="test2" ></div>

<br/><br/>
Dev by cssrain


</body>
</html>

?

?

time.js的代码:

$(function(){
jQuery.fn.countDown = function(settings,to) {
	if(!to && to != settings.endNumber) { to = settings.startNumber; }
	this.data("CR_currentTime",to);
	$(this).text(to).animate({"none":"none"},settings.duration,'',function() {
		if(to > settings.endNumber + 1) {
			$(this).countDown(settings,to - 1);
		}else{
			settings.callBack(this);
		}
	});		
	return this;
};
//计时&&重新计时
jQuery.fn.CRcountDown = function(settings) {
	settings = jQuery.extend({
		startNumber: 10,
		endNumber: 0,
		duration: 1000,
		callBack: function() { }
	}, settings);
	this.data("CR_duration",settings.duration);
	this.data("CR_endNumber",settings.endNumber);
	this.data("CR_callBack",settings.callBack);
	return this.stop().countDown(settings);
};
//计时暂停
jQuery.fn.pause = function(settings) {
	return this.stop();
};
//暂停后,重新开始
jQuery.fn.reStart = function() {
	return this.pause().CRcountDown({
		startNumber : this.data("CR_currentTime"),
		duration : 	this.data("CR_duration"),
		endNumber : this.data("CR_endNumber"),
		callBack : this.data("CR_callBack")
	});
};

})

?

?

1 楼 沈新浪 2010-10-15  
感觉挺实用的
2 楼 aotian16 2010-10-15  
挺有意思,不错的
3 楼 NumbCoder 2010-10-18  
不错,,受你思路的启发,我做了一个可以按指定日期倒计时的插件
4 楼 乌托邦之爱 2010-10-19  
NumbCoder 写道
不错,,受你思路的启发,我做了一个可以按指定日期倒计时的插件


谢谢你对我的关注,是否可以把你的按指定日期倒计时的插件也发表出来分享一下啊,你的指定日期的插件?

倒计时时是否可以按照指定格式倒计时吗 比如从某个时间或者年月日的基础上倒计时
HH:mm:ss格式的倒计时
或者
yyyy-MM-dd HH:mm:ss

可以这样吗,或者只是倒计时一个整数而已?

希望能拿出来分享一下,这样我相信我们都会有所提高
5 楼 long3564 2010-10-19  
下来看看    ...
6 楼 zhaobohao 2010-10-20  
乌托邦之爱 写道
NumbCoder 写道
不错,,受你思路的启发,我做了一个可以按指定日期倒计时的插件


谢谢你对我的关注,是否可以把你的按指定日期倒计时的插件也发表出来分享一下啊,你的指定日期的插件?

倒计时时是否可以按照指定格式倒计时吗 比如从某个时间或者年月日的基础上倒计时
HH:mm:ss格式的倒计时
或者
yyyy-MM-dd HH:mm:ss

可以这样吗,或者只是倒计时一个整数而已?

希望能拿出来分享一下,这样我相信我们都会有所提高



自己改了一下.按日期时间,到计时.
7 楼 mgh2008 2010-10-20  
这两个插件都收了,不错,多谢
8 楼 乌托邦之爱 2010-10-20  
zhaobohao 写道
乌托邦之爱 写道
NumbCoder 写道
不错,,受你思路的启发,我做了一个可以按指定日期倒计时的插件


谢谢你对我的关注,是否可以把你的按指定日期倒计时的插件也发表出来分享一下啊,你的指定日期的插件?

倒计时时是否可以按照指定格式倒计时吗 比如从某个时间或者年月日的基础上倒计时
HH:mm:ss格式的倒计时
或者
yyyy-MM-dd HH:mm:ss

可以这样吗,或者只是倒计时一个整数而已?

希望能拿出来分享一下,这样我相信我们都会有所提高



自己改了一下.按日期时间,到计时.



太帅了 高手 果然不同凡响
9 楼 viva-浅唱 2010-10-20  
暂时没发现什么用处,不过挺不错的~
10 楼 satanultra 2010-10-21  
什么都jquery..插件...
11 楼 乌托邦之爱 2010-10-21  
satanultra 写道
什么都jquery..插件...

是啊 因为现在jquery的对于浏览器的兼容做的还算不错 所以比较实用喽 要是用js的话还需要自己来判断 比较费事啊 呵呵
12 楼 sodabao 2010-10-22  
留下以备需要
13 楼 xiaoyangok 2010-11-19  
很不错!!!
14 楼 xiaoyiz 2011-03-26  
这个插件确实不错,和spring 的定时器一起用还不错,不知道任务多了 会不会吃太多的内存。
15 楼 孙露威 2011-03-29  
新人学习了
  相关解决方案