基于jQuery的自定义倒计时

基于jQuery的自定义倒计时

支持传入参数类型：时间类型，数字类型，其中数字类型区分时、分、秒。以下为js代码

参数	说明
time	日期类型，如： ‘2020-4-14 23:59’
endminute	数字类型 如：15分
endsecond	数字类型 如：15秒
endhour	数字类型 如：15小时
msg	时间结束后提示内容 如：活动已结束

var countDown = function(dome,time){
	this.$dome = $(dome);
	this.defaults = {
		time:'',//日期类型
		endminute:0,//数字类型 如15分
		endsecond:0,//数字类型 如15秒
		endhour:0,//数字类型 如15小时
		msg:'00:00:00',//时间结束后提示内容
		type:fase
	}
	this.confige = {
		times:0,
		day:'0',
		hour:'0',
		minute:'0',
		second:'0',
		timed:'',
		timer:null
	}
	this.setting = $.extend({},this.defaults,time);
}
countDown.prototype = {
		clearTimer:function(){//清除定时器
			var that = this;
			clearInterval(that.confige.timer);
		},
	Inintialize:function(){
		var that = this;
		if(that.setting.time && isNaN(that.setting.time)){
			setInterval(()=>{
				that.setTime()
			},1000);
		}else if(that.setting.endminute && typeof that.setting.endminute === 'number'){
			that.confige.times = that.setting.endminute*60;
			that.setminute();
		}else if(that.setting.endsecond && typeof that.setting.endsecond === 'number'){
			that.confige.times = that.setting.endsecond;
			that.setsecond();
		}else if(that.setting.endhour && typeof that.setting.endhour === 'number'){
			that.confige.times = that.setting.endhour*60*60;
			that.sethour();
		}
		
	},
	setTime:function(){
		var that = this;	
		/*倒计时为时间类型*/ 
		if(that.setting.time && isNaN(that.setting.time)){
			var now = (new Date()).getTime();
			var date = new Date(that.setting.time);
			var times = date.getTime();
			if(times > now){
				that.confige.times = (times-now)/1000;
				if(that.confige.times > 0){
					that.confige.day = Math.floor(that.confige.times / 60 / 60 / 24);
					that.confige.hour = Math.floor(that.confige.times / 60 / 60 % 24)<10?"0"+Math.floor(that.confige.times / 60 / 60 % 24):Math.floor(that.confige.times / 60 / 60 % 24);
					that.confige.minute = Math.floor(that.confige.times / 60 % 60)<10?"0"+Math.floor(that.confige.times / 60 % 60):Math.floor(that.confige.times / 60 % 60);
					that.confige.second = Math.floor(that.confige.times % 60)<10?"0"+Math.floor(that.confige.times % 60):Math.floor(that.confige.times % 60);
					if(that.confige.day > 0){
						that.confige.timed = that.confige.day+'天 '+that.confige.hour+':'+that.confige.minute+':'+that.confige.second;
					}else{
						that.confige.timed = that.confige.hour+':'+that.confige.minute+':'+that.confige.second;
					}
					that.$dome.html(that.confige.timed);
				}else{
					that.$dome.html(that.setting.msg);
				}								
			}else{
				that.$dome.html('活动已结束');	
			}
		}		
	},
	sethour:function(){
		var that = this;
		that.confige.timer = setInterval(()=>{
			/*倒计时为数字类型 此处为小时 必须*/			
			that.confige.times = that.confige.times - 1;
			if(that.confige.times > 0){
				that.confige.day = Math.floor(that.confige.times/60/60/24);
				that.confige.hour = Math.floor(that.confige.times/60/60%24)<10?'0'+Math.floor(that.confige.times/60/60%24):Math.floor(that.confige.times/60/60%24);
				that.confige.minute = Math.floor(that.confige.times/60%60)<10?'0'+Math.floor(that.confige.times/60%60):Math.floor(that.confige.times/60%60);
				that.confige.second = Math.floor(that.confige.times%60)<10?'0'+Math.floor(that.confige.times%60):Math.floor(that.confige.times%60);
				console.log(that.confige.day)
				if(that.confige.day > 0){
					that.confige.timed = that.confige.day+'天 '+that.confige.hour+':'+that.confige.minute+':'+that.confige.second;
				}else{
					that.confige.timed = that.confige.hour+':'+that.confige.minute+':'+that.confige.second;
				}			
				that.$dome.html(that.confige.timed);
			}else{
				that.$dome.html(that.setting.msg);
			}
		},1000);
	},
	setminute:function(){
		var that = this;
		setInterval(()=>{
			/*倒计时为数字类型 此处为分 必须小于60*/			
			that.confige.times = that.confige.times - 1;
			if(that.confige.times > 0){
				that.confige.minute = Math.floor(that.confige.times/60)<10?'0'+Math.floor(that.confige.times/60):Math.floor(that.confige.times/60);
				that.confige.second = Math.floor(that.confige.times%60)<10?'0'+Math.floor(that.confige.times%60):Math.floor(that.confige.times%60);
				that.confige.timed = '00:'+that.confige.minute+':'+that.confige.second;
				that.$dome.html(that.confige.timed);
			}else{
				that.$dome.html(that.setting.msg);
			}			
		},1000);
	},
	setsecond:function(){
		var that = this;
		setInterval(()=>{
			/*倒计时为数字类型 此处为秒 必须小于60*/			
			that.confige.times = that.confige.times - 1;	
			if(that.confige.times > 0){
				that.confige.second = Math.floor(that.confige.times%60)<10?'0'+Math.floor(that.confige.times%60):Math.floor(that.confige.times%60);
				that.confige.timed = '00:00:'+that.confige.second;
				that.$dome.html(that.confige.timed);				
			}else{
				that.$dome.html(that.setting.msg);
			}
		},1000);
	}
}
$.fn.countDown = function(time){
	var con = new countDown(this,time);
	return con.Inintialize();
}

调用方式1
HTML

<div id="endTime"></div>

js

<script type="text/javascript">
			var times = {
				time:'2020-4-14 23:59',//传入日期类型字符串
			}
			$('#endTime').countDown(times)
</script>

调用方式2
HTML

<div id="timer"></div>

js

	<script type="text/javascript">
		var times = {
    
    
			time:'2020-12-24 23:59',//传入日期类型字符串
			type:false
		}
		var coun = new countDown($('#timer'),times);
			coun.Inintialize();
		$('#timer').on('click',function(ev){
    
    
			times.type = !times.type;
			if(times.type){
    
    
				coun.clearTimer();
			}else{
    
    
				coun.Inintialize();
			}
		})
	</script>