1. 程式人生 > >js根據當前時間和結束時間做倒計時(還有XXX天XXX時XXX分XXX秒)

js根據當前時間和結束時間做倒計時(還有XXX天XXX時XXX分XXX秒)

js根據當前時間和結束時間做倒計時(還有XXX天XXX時XXX分XXX秒),當天,不需要XXX天數,剩餘0小時,不需要顯示XXX時,剩餘0分鐘,不需要顯示XXX分

1. js方法

/**
 1. 根據結束時間和當前時間的倒計時
 2. 
 3. @param id:html 程式碼的id值
 4. @param endDateStr:結束時間
 */
function getAcquisitionCountdown(id, endDateStr) {
	// 結束時間
	var endDate = new Date(endDateStr.replace(/-/g,"/"));
	// 當前伺服器時間
	var now = new Date($.ajax({
		async : false
	}).getResponseHeader("Date"));
	nowDate = new Date(now.replace(/-/g,"/"));
	// 相差的總秒數
	var totalSeconds = parseInt((endDate - nowDate) / 1000);
	// 天數(轉換成字串型別,以防網不好的情況下,出現now)
	var day = totalSeconds / (60 * 60 * 24);
	var days=null;
	days=day.toString().split(".")[0];
	// 取模(餘數)
	var modulo = totalSeconds % (60 * 60 * 24);
	// 小時數
	var hours = Math.floor(modulo / (60 * 60));
	modulo = modulo % (60 * 60);
	// 分鐘
	var minutes = Math.floor(modulo / 60);
	// 秒
	var seconds = modulo % 60;
	// 輸出到頁面
	if (days != "0" && days>0) {
		document.getElementById(id).innerHTML =''剩餘"+ days + "天" + hours
				+ "時" + minutes + "分" + seconds + "秒";
	} else if (days == 0 && hours != 0 && hours>0) {
		document.getElementById(id).innerHTML = ''剩餘"+ hours + "時"
				+ minutes + "分" + seconds + "秒";
	} else if (hours == 0 && minutes != 0 && minutes>0) {
		document.getElementById(id).innerHTML = ''剩餘"+ minutes + "分"
				+ seconds + "秒";
	} else if (minutes == 0 && seconds != 0 && seconds>0) {
		document.getElementById(id).innerHTML = ''剩餘"+ seconds + "秒";
	} else {
		document.getElementById(id).innerHTML = "已結束";
	}
	// 延遲一秒執行自己
	setTimeout(function() {
		if (endDate >= nowDate) {
			TimeDown(id, endDateStr);

		}
	}, 1000)
}
//呼叫TimeDown方法
getAcquisitionCountdown("#shijian", "2018-12-22 14:10:08");

2. HTML程式碼

<div id="shijian"></div >