倒计时（天，时，分，秒）

最新推荐文章于 2021-04-09 11:27:18 发布

y_y_y3313

最新推荐文章于 2021-04-09 11:27:18 发布

阅读量760

点赞数

分类专栏：技术 jquery 倒计时 jquery插件文章标签： jQuery

本文链接：https://blog.csdn.net/y_y_y3313/article/details/8855657

版权

技术同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

倒计时

1 篇文章 0 订阅

订阅专栏

废话少说，贴代码

jQuery.fn.Countdown=function(options){ 
   var defaults = {  
        endTime: '3/12/23/3', 
    };
   var options = $.extend(defaults, options);  
   return this.each(function () {  
   var Item=$(this),wholdBool=true;
     Item.append("<span class='days'></span><i>days</i><span class='hours'></span><i>hours</i><span class='minutes'></span><i>minutes</i><span class='seconds'></span><i>seconds</i>")
      var drawing=function(){
		  var timeArray=options.endTime.split("/");
		  Item.find(".days").text(addZero(timeArray[0]));
		  Item.find(".hours").text(addZero(timeArray[1]));
		  Item.find(".minutes").text(addZero(timeArray[2]));
		  Item.find(".seconds").text(addZero(timeArray[3]));
		  };
	  var setNum=function(){
		  var secondTxt=Item.find(".seconds").text();
		  Item.find(".seconds").text(seconds(secondTxt));
		  if(wholdBool){
		  setTimeout(setNum,1000)
		  }
		  };
	  var seconds=function(SEC){
		  var secondTxt=Number(SEC);
		  if(secondTxt==0){
			  if(isOver("days")&&isOver("hours")&&isOver("minutes")){
				 //all over
				  wholdBool=false;
				  }else{
				  secondTxt=59;  
				  minutes();
					  }
			  }else{
				 secondTxt=secondTxt-1;
				  }
		  return addZero(secondTxt);
		  };
	  var minutes=function(){
		  var minuTxt=Number(Item.find(".minutes").text());
		  if(minuTxt==0){
			   if(isOver("days")&&isOver("hours")){
				  //over
				  }else{
				  minuTxt=59;  
				  hours();
					  }
			  }else{
				  minuTxt=minuTxt-1;
				  }
			Item.find(".minutes").text(addZero(minuTxt));
		  };	
	  var hours=function(){
		  var hoursTxt=Number(Item.find(".hours").text());
		  if(hoursTxt==0){
			   if(isOver("days")){
				  //over
				  }else{
				  hoursTxt=23;  
				  days();
					  }
			  }else{
				  hoursTxt=hoursTxt-1;
				  }
			Item.find(".hours").text(addZero(hoursTxt));
		  
		  };
	  
	  var days=function(){
		  var daysTxt=Number(Item.find(".days").text());
		  if(daysTxt==0){
			   
			  }else{
				  daysTxt=daysTxt-1;
				  }
			if(daysTxt<=9){
				daysTxt="0"+daysTxt;
				}
			Item.find(".days").text(addZero(daysTxt));
		  
		  }; 
	  //补零
	  var addZero=function(nos){
		  nos=(typeof nos=="Number")?nos:Number(nos);
		  if(nos<=9){
			  nos="0"+nos;
			  }else{
				  nos=nos+"";
				  }
		   return nos;
		  }	    
	  //判断是否结束
	  var isOver=function(time){
		  var boolen=false;
		  if(Number(Item.find("."+time).text())==0){
			  boolen=true;
			  }
			  return boolen;
		  }
	  var inIt=function(){
		  drawing();
		  setNum();
		  };
	  inIt();	   
   });
 }

用法

<style type="text/css">
.hi i,.hi11 i{ padding-right:15px;}
.hi span,.hi11 span{ font-weight:bold;}
</style>
</head>
<script type="text/javascript">
$(function(){
	$(".hi").Countdown();
	$(".hi11").Countdown({endTime: '0/1/0/5'});
	});
</script>
<body>
   <span class="hi"></span>
    <span class="hi11"></span>
</body>

y_y_y3313

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时（天，时，分，秒）

废话少说，贴代码jQuery.fn.Countdown=function(options){ var defaults = { endTime: '3/12/23/3', }; var options = $.extend(defaults, options); return this.each(function () { var
复制链接

扫一扫