基於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',//時間結束後提示內容
	}
	this.confige = {
		times:0,
		day:'0',
		hour:'0',
		minute:'0',
		second:'0',
		timed:'',
		timer:null
	}
	this.setting = $.extend({},this.defaults,time);
}
countDown.prototype = {
	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();
}

調用方式

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