调用方法:
<!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倒计时插件详解** 在Web开发中，倒计时功能经常被用于各种应用场景，比如活动开始前的预告、考试倒计时、产品上市时间提示等。jQuery作为一个广泛使用的JavaScript库，提供了丰富的插件来帮助开发者实现...
JQuery倒计时插件是Web开发中常用的一种工具，它可以帮助开发者在网页上实现动态的时间显示，例如倒计时至某个特定日期或时间。这种插件通常基于JavaScript库JQuery构建，因为JQuery简化了DOM操作和事件处理，使得...
《三种颜色的jQuery倒计时插件解析与应用》 在网页开发中，倒计时功能经常被用于预告活动、展示剩余时间等场景，而jQuery作为一款强大的JavaScript库，为开发者提供了丰富的工具和方法来实现这些功能。本篇文章将...
jQuery倒计时插件是一种基于JavaScript库jQuery的实用工具，用于在网页上实现动态的、实时更新的时间显示。这类插件通常被用于事件预告、限时促销、考试倒计时等场景，为用户提供一种直观的方式感知特定时间点的到来...
**jQuery倒计时插件详解** 在Web开发中，倒计时功能经常被用于各种应用场景，如活动开始时间提醒、考试倒计时等。jQuery，作为一款轻量级的JavaScript库，提供了丰富的API来简化DOM操作，使得创建倒计时插件变得...
本资源“简单的jquery倒计时插件.rar”提供了一个基于jQuery的倒计时功能，这在许多应用场景中非常实用，比如考试倒计时、活动开始倒计时等。接下来，我们将详细探讨jQuery、倒计时插件的工作原理以及如何使用此类...
【jQuery倒计时插件详解】 在Web开发中，倒计时功能经常被用于各种应用场景，如活动预告、考试倒计时或者定时发布等。jQuery作为一款轻量级的JavaScript库，提供了丰富的插件来扩展其功能，其中就包括倒计时插件。...
《jQuery倒计时插件深度解析》 在Web开发中，倒计时功能常常用于活动预告、考试倒计时、限时优惠等场景，为用户提供直观的时间感知。jQuery作为一款广泛使用的JavaScript库，提供了丰富的插件来实现这些功能，其中...
本篇文章将详细讲解基于jQuery实现的简单倒计时插件，以及如何通过这个插件来创建一个从10到0的倒计时效果。 首先，让我们了解jQuery倒计时插件的基本原理。倒计时功能通常涉及到JavaScript的定时器（setTimeout或...
本文将详细讲解如何使用jQuery实现多个倒计时插件同时计时的功能，这对于创建如考试倒计时、活动倒计时等多种场景都非常有用。 首先，我们需要一个基础的jQuery倒计时插件。这个插件通常包含以下核心功能： 1. **...
jQuery倒计时插件是网页开发中常用的一种工具，它能帮助开发者在页面上实现动态的时间显示，例如倒计时到某个特定日期或时间。在本案例中，我们讨论的是一款名为“lwtCountdown”的jQuery插件，该插件可能是从网络上...
在本文中，我们将深入探讨jQuery倒计时插件及其6种不同的倒计时效果。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作和Ajax交互。倒计时功能在网页中有着广泛的应用，如在线考试、产品...