jQuery animate()方法设计倒计时

dly · 发表于 2011-4-22 02:17:07

jQuery animate()方法设计倒计时，用jquery的animate()方法调用计时；用jquery的stop()方法停止计时；用jquery的data()方法记录一些变量，使之重新开始。

<!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>jQuery 设计倒计时</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h5>jQuery 设计倒计时</h5>
<button id="start" >开始</button>
<button id="pause" >暂停</button>
<button id="again" >重新开始</button>
<div id="test" ></div>
<script type="text/javascript" src="/uploads/swfupls/jquery-1.4.2.js"></script>
<script type="text/javascript" >
jQuery.fn.countDown = function(settings,to) {
if(!to && to != settings.endNumber) { to = settings.startNumber; }
this.data("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.CcountDown = function(settings) {
settings = jQuery.extend({
startNumber: 10,
endNumber: 0,
duration: 1000,
callBack: function() { }
}, settings);
this.data("Duration",settings.duration);
this.data("EndNumber",settings.endNumber);
this.data("CallBack",settings.callBack);
return this.stop().countDown(settings);
};
//计时暂停
jQuery.fn.pause = function(settings) {
return this.stop();
};
//暂停后，重新开始
jQuery.fn.reStart = function() {
return this.pause().CcountDown({
startNumber : this.data("CurrentTime"),
duration : this.data("Duration"),
endNumber : this.data("EndNumber"),
callBack : this.data("CallBack")
});
};
/***** 测试 ****/
// 开始
$("#start").click(function(){
$("#test").CcountDown({
startNumber:15,
callBack:test
})
.css("color","red");
});
// 暂停
$("#pause").click(function(){
$("#test").pause();
});
// 重新开始
$("#again").click(function(){
$("#test").reStart();
});
function test(){
$("<p>计时结束!</p>")
.hide()
.fadeIn(1000)
.appendTo("body");
}
</script>
</body>
</html>

复制代码