当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » JavaScript  » 网页设计与交互
hcqenjoy

jquery倒计时插件

hcqenjoy 发布于 2011年01月27日 23时, 2评/7606阅
分享到: 
收藏 +0
1
<无详细内容>
标签: 倒计时 jQuery

代码片段(1) [全屏查看所有代码]

1. [代码][JavaScript]代码     跳至 [1] [全屏预览]

1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
2.<html xmlns="http://www.w3.org/1999/xhtml">    
3.<head>    
4.<title></title><!--http://www.cssrain.cn/demo/jquery-ui-tab/jquery-1.3.1.js-->    
5.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
6.<script src="jquery-1.4.2.js" type="text/javascript"></script>    
7.<script src="time.js" type="text/javascript"></script>    
8.<script>    
9.$(function(){    
10./*****  测试1  ****/    
11.// 开始 && 重新开始    
12.$("#start").click(function(){    
13.    $("#test").CRcountDown({    
14.                startNumber:15,    
15.                callBack:test    
16.            })    
17.            .css("color","red");    
18.});    
19.// 暂停    
20.$("#pause").click(function(){    
21.    $("#test").pause();    
22.});    
23.// 暂停后 重新开始    
24.$("#again").click(function(){    
25.    $("#test").reStart();    
26.});    
27.function test(){    
28.    $("<p>1</p>")    
29.              .hide()    
30.              .fadeIn(1000)    
31.              .appendTo("body");    
32.}    
33.   
34./*****  测试2  ****/    
35.// 开始 && 重新开始    
36.$("#start2").click(function(){    
37.    $("#test2").CRcountDown({    
38.                startNumber:10,    
39.                callBack:test2    
40.            })    
41.            .css("color","blue");    
42.});    
43.// 暂停    
44.$("#pause2").click(function(){    
45.    $("#test2").pause();    
46.});    
47.// 暂停后 重新开始    
48.$("#again2").click(function(){    
49.    $("#test2").reStart();    
50.});    
51.function test2(){    
52.    $("<p>2</p>")    
53.              .hide()    
54.              .fadeIn(1000)    
55.              .appendTo("body");    
56.}    
57.   
58.})    
59.</script>    
60.</head>    
61.<body>    
62.<h1>测试1:</h1>    
63.<button id="start" >开始&&重新开始</button>    
64.<button id="pause" >暂停</button>    
65.<button id="again" >暂停后 重新开始</button>    
66.<div id="test" ></div>    
67.   
68.<br/>    
69.<h1>测试2:</h1>    
70.<button id="start2" >开始&&重新开始</button>    
71.<button id="pause2" >暂停</button>    
72.<button id="again2" >暂停后 重新开始</button>    
73.<div id="test2" ></div>    
74.   
75.<br/><br/>    
76.Dev by cssrain    
77.   
78.   
79.</body>    
80.</html>  
<!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的代码:

Time.js的代码代码 
1.$(function(){    
2.jQuery.fn.countDown = function(settings,to) {    
3.    if(!to && to != settings.endNumber) { to = settings.startNumber; }    
4.    this.data("CR_currentTime",to);    
5.    $(this).text(to).animate({"none":"none"},settings.duration,'',function() {    
6.        if(to > settings.endNumber + 1) {    
7.            $(this).countDown(settings,to - 1);    
8.        }else{    
9.            settings.callBack(this);    
10.        }    
11.    });         
12.    return this;    
13.};    
14.//计时&&重新计时    
15.jQuery.fn.CRcountDown = function(settings) {    
16.    settings = jQuery.extend({    
17.        startNumber: 10,    
18.        endNumber: 0,    
19.        duration: 1000,    
20.        callBack: function() { }    
21.    }, settings);    
22.    this.data("CR_duration",settings.duration);    
23.    this.data("CR_endNumber",settings.endNumber);    
24.    this.data("CR_callBack",settings.callBack);    
25.    return this.stop().countDown(settings);    
26.};    
27.//计时暂停    
28.jQuery.fn.pause = function(settings) {    
29.    return this.stop();    
30.};    
31.//暂停后,重新开始    
32.jQuery.fn.reStart = function() {    
33.    return this.pause().CRcountDown({    
34.        startNumber : this.data("CR_currentTime"),    
35.        duration :  this.data("CR_duration"),    
36.        endNumber : this.data("CR_endNumber"),    
37.        callBack : this.data("CR_callBack")    
38.    });    
39.};    
40.   
41.})  
   


开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(2)

  • 1楼:tanlong4259 发表于 2012-01-05 08:52 回复此评论
    介绍一个可以学习JQuery UI、JQuery Liger 、DWZ、JQuery EasyUI的网站
    前端技术交流论坛 www.jqueryuibbs.com包含了上述技术
  • 2楼:lodyyy2013 发表于 2013-04-03 16:34 回复此评论
开源从代码分享开始 分享代码
hcqenjoy的其它代码 全部(340)...