成长脚印-专注于互联网发展

【原创】JQ翻页倒计时插件

post by:天之骄子 2012-11-14 19:12

正好一同志需要这么一个倒计时效果，个人又觉得还不错，所以就研究了一下原理写成插件方便使用。最后会再给出附件下载。

查看DEMO

下面贴出插件代码：

// 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

评论：

发表评论：