JQuery倒计时插件是一种比较常用的JQuery的插件，这里是粘贴别人的博客，并未进行测试，先收藏着以后会用到。
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的代码代码
$(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")
});
};
})
分享到：
相关推荐
JQuery 倒计时插件：几种数字表的样式，如HTC手机上的数字表。
三种颜色的jquery倒计时插件
jquery倒计时插件 jquery倒计时插件 jquery倒计时插件
/* * 插件说明： * 这是一个jQuery倒计时插件，实在是太简单小巧了，使用时只需要调用timer这个方法就可以了。只要看完这个说明，你绝对会掌握它。
简单的jQuery倒计时插件 可以根据自己需求拓展定制
jquery倒计时插件多个倒计时同时计时代码 jquery倒计时插件多个倒计时同时计时代码
简单的jquery倒计时插件.rar
三种颜色的jquery倒计时插件 非常好用的一款JQuery插件
jQuery倒计时插件6种不同倒计时效果代码 jQuery倒计时插件6种不同倒计时效果代码
jquery 倒计时插件 jCountr 实例 jquery 倒计时插件 jCountr 实例
jQuery.countdown是一款功能齐全的jQuery倒计时插件。jQuery.countdown.js一个文件中集合了所有的倒计时功能，它能够显示各种时间格式，并提供回调函数。
jQuery倒计时插件FlipTimer是一款类似日历翻页效果的jQuery网站上线倒计时代码下载。
网络上的Jquery倒计时插件，希望对朋友们有用，来自于网络！
jquery倒计时插件可自定义多个倒计时间展示