【原创】JQ翻页倒计时插件
正好一同志需要这么一个倒计时效果，个人又觉得还不错，所以就研究了一下原理写成插件方便使用。最后会再给出附件下载。
下面贴出插件代码：
// JavaScript Document
(function($){
$.fn.count_down=function(options){
var defaults={};
var opts=$.extend(defaults,options);
var endtime=$(this).attr("endtime");
var a=endtime.split(/[^0-9]/);
var endtime=new Date(a[0],a[1]-1,a[2],a[3],a[4],a[5]);
var nowtime=new Date();
if(endtime<nowtime){
alert("截止时间不能小于当前!");
return false;
}
var str=
'<ul class="cd day">'+
'<li class="day_t"></li>'+
'<li class="day_b"></li>'+
'</ul>'+
'<ul class="cd day">'+
'<li class="day_t"></li>'+
'<li class="day_b"></li>'+
'</ul>'+
'<ul class="cd">'+
'<li class="days">DAYS</li>'+
'</ul>'+
'<ul class="cd hour">'+
'<li class="t"></li>'+
'<li class="b"></li>'+
'</ul>'+
'<ul class="cd hour">'+
'<li class="t"></li>'+
'<li class="b"></li>'+
'</ul>'+
'<ul class="cd">'+
'<li class="s"></li>'+
'</ul>'+
'<ul class="cd minute">'+
'<li class="t"></li>'+
'<li class="b"></li>'+
'</ul>'+
'<ul class="cd minute">'+
'<li class="t"></li>'+
'<li class="b"></li>'+
'</ul>'+
'<ul class="cd">'+
'<li class="s"></li>'+
'</ul>'+
'<ul class="cd second">'+
'<li class="t"></li>'+
'<li class="b"></li>'+
'</ul>'+
'<ul class="cd second">'+
'<li class="t"></li>'+
'<li class="b"></li>'+
'</ul>';
$(this).html(str);
//alert(leftArr[0]);
function timeleft(nowT,endT){
var now=nowT.getTime();
var end=endT.getTime();
var tleft=end-now;
//计算出相差天数
var days=Math.floor(tleft/(24*3600*1000));
//计算出小时数
var leave1=tleft%(24*3600*1000);
var hours=Math.floor(leave1/(3600*1000));
//计算相差分钟数
var leave2=leave1%(3600*1000);
var minutes=Math.floor(leave2/(60*1000));
//计算相差秒数
var leave3=leave2%(60*1000);
var seconds=Math.round(leave3/1000);
var leftArr=new Array(treset(days),treset(hours),treset(minutes),treset(seconds));
return leftArr;
}
function treset(t){//时间补零
if(t<10){
return "0"+t;
}else{
return t;
}
}
function timeBgSet(obj,t,type){//背景参数(设置对象,相隔数，是否为天数)
t=""+t;
//alert(t)
var numf=t.substr(0,1);
var numl=t.substr(1,1);
var interval=28;
var left=0;
if(type=="day"){
left=-100;
//if(numf==0){
//$(".day:first").hide();
//}
}
var ttopf=-interval*numf;
var ttopl=-interval*numl;
var objff=obj.eq(0).find("li:first");
var objfl=obj.eq(0).find("li:last");
var objlf=obj.eq(1).find("li:first");
var objll=obj.eq(1).find("li:last");
function bgset(box,l,t){//背景set函数
box.css("background-position",l+"px "+t+"px");
}
bgset(objff,left,ttopf);
bgset(objfl,left,ttopf-283);
bgset(objlf,left,ttopl);
bgset(objll,left,ttopl-283);
var j=0;
function sbgchg(){//背景设置
left=-23*j;
if(type=="second"){
if(typeof opts.bgset!="undefined"){
clearTimeout(opts.bgset);
}
bgset(objlf,left,ttopl);
opts.bset=setTimeout(function(){
bgset(objll,left,ttopl-283);
},150);
}
j++;
if(j==3){
j=0;
}
}
if(typeof opts.set!="undefined"){
clearInterval(opts.set);
}
opts.set=setInterval(sbgchg,250);
}
//初始设置
var typeArr=new Array("day","hour","minute","second");
var objthis=$(this);
function init(){
nowtime=new Date();
if(nowtime>=endtime){
clearInterval(countInter);
alert("截止时间到！");
return false;
}
var leftArr=timeleft(nowtime,endtime);
for(i=0;i<leftArr.length;i++){
var d=0;
if(typeArr[i]=="day"){
d=1;
}
var setBox=objthis.find("."+typeArr[i]);
timeBgSet(setBox,leftArr[i],typeArr[i]);
}
}
//初始执行
init();
countInter=setInterval(init,1000);
}
})(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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态时间</title>
<link href="count_down.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="count_down.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(function(){
$(".count_down").eq(0).count_down();
$(".count_down").eq(1).count_down();
})
</script>
<body>
<div class="count_down" endtime="2012-12-14 23:59:59"></div>
<div class="count_down" endtime="2012-11-24 12:12:12"></div>
</body>
</html>【附件】动态时间.zip
阅读本文后，您的心情是：
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注
