倒计时插件(及自动循环倒计时)代码

本文由清尘发表于2015-05-18 22:07属于jQuery分类

插件版:

插件版演示
循环倒计时演示

HTML部分:

<div id="timer" class="timer">仅剩:<span class="day"></span>天<span class="hour"></span>时<span class="minite"></span>分<span class="second"></span>秒
</div>

<div id="timer2" class="timer">仅剩:<span class="day"></span>天<span class="hour"></span>时<span class="minite"></span>分<span class="second"></span>秒
</div>

<div id="timer3" class="timer">仅剩:<span class="day"></span>天<span class="hour"></span>时<span class="minite"></span>分<span class="second"></span>秒
</div>

CSS部分:

.timer{padding:15px 0;line-height:18px;color:#fff; background-color: #f1425b; margin-bottom: 50px;}
.timer span{background-color:#000;border-radius:4px;color:#fff;padding:0 5px;margin:0 2px;}

JS插件代码:

$.fn.timerBox=function(options){
	var defaults={
		endTime:'2015/05/14 16:00:00',
		endHtml:"抢购已经结束!",
		zero:true
	},
		opts=$.extend(defaults,options),
		htmlBox=this,
		dayBox=htmlBox.find(".day"),
		hourBox=htmlBox.find(".hour"),
		miniteBox=htmlBox.find(".minite"),
		secondBox=htmlBox.find(".second"),
		timer;

	function timerFn(){
	var	endTime=new Date(opts.endTime),
		nowTime=new Date(),
		leftSecond=parseInt((endTime.getTime()-nowTime.getTime())/1000),
		day=parseInt(leftSecond/3600/24),
		hour=parseInt((leftSecond/3600)%24),
		minite=parseInt((leftSecond/60)%60),
		second=parseInt(leftSecond%60);
		if(opts.zero){getZero()};

		if(leftSecond>0){
			dayBox.html(day);
			hourBox.html(hour);
			miniteBox.html(minite);
			secondBox.html(second);
			timer=setTimeout(timerFn,1000);
		}else{
			htmlBox.html(opts.endHtml);
			clearTimeout(timer);
		};

		function getZero(){
		day<10?day="0"+day:day;
		hour<10?hour="0"+hour:hour;
		minite<10?minite="0"+minite:minite;
		second<10?second="0"+second:second;
		};

	};



	timerFn();

};

插件使用JS:

$(function(){
	$("#timer").timerBox({
		endTime:'2015/08/14 16:00:00'
	});

	$("#timer2").timerBox({
		endTime:'2015/08/18 18:00:00'
	});


	$("#timer3").timerBox({
		endTime:'2015/08/16 18:00:00',
		zero:false
	});

});

使用说明:

$("#timer").timerBox({
		endTime:'2015/05/14 16:00:00',  //设置结束时间
		endHtml:"抢购已经结束!",    //结束后的HTML字符串
		zero:true    // 是否开启前置加 “0”
	});

====

自动循环的倒计时代码:

设置日期可自动循环。

function timerBox(idstr,timestr,day){
	var timeBox=$(idstr),
	t=day,
	starTime=new Date(timestr),
	timer;
	function count(){
	endTime=new Date(),
	newTime=parseInt((endTime.getTime()-starTime.getTime())/1000),
	n=parseInt(newTime/3600/24/t),
	leftSecond=t*24*3600-(newTime-t*n*24*3600),
	day=parseInt(leftSecond/3600/24),
	hour=parseInt((leftSecond/3600)%24),
	minite=parseInt((leftSecond/60)%60),
	second=parseInt(leftSecond%60);
	if(leftSecond>0){
		timeBox.html("仅剩:<b>" + hour + "</b>时<b>" + minite + "</b>分<b>" + second + "</b>秒");
		timer=setTimeout(count,1000);
	}else{
		timeBox.html("抢购已经结束!");
		clearTimeout(timer);
	};

	};

	count();
	
};
timerBox("#timer",'2015/05/11 23:59:59',20);
timerBox("#timer2","2015/05/18 10:00:00",5);

HTML部分:

<p>倒计时一</p>
<div id="timer" class="timer"></div>
<p>倒计时二</p>
<div id="timer2" class="timer"></div>

CSS部分:

.timer{padding:15px 0;line-height:18px;color:#fff; background-color: #f1425b;}
.timer b{background-color:#000;border-radius:4px;color:#fff;padding:0 5px;margin:0 2px;}