简单javascript代码实现简单的天时分秒倒计时功能效果

常见的活动倒计时效果js代码，实现原理很简单，通过计算结束时间与当前的时间差实现倒计时，然后可以使用setInterval方法实现每隔1000毫秒（即1秒）变动一次剩余时间的动态倒计时效果。

HTML代码：

<div class="countTime">
	<span id="day"></span>
	<span>天</span>
	<span id="hour"></span>
	<span>时</span>
	<span id="min"></span>
	<span>分</span>
	<span id="sec"></span>
	<span>秒</span>
</div>

PS：CSS样式自由发挥。

js代码：

倒计时函数

function countTime(endtime) {
	//获取当前时间
	var date = new Date(); //new实例化对象Data()
	var now = date.getTime(); //getTime()函数返回1970-01-01 00:00:00至现在的总毫秒数（即时间戳）
	//设置截止时间
	var str=endtime; //获取结束时间，附值给变量str
	var endDate = new Date(str); //把结束时间转化为对象
	var end = endDate.getTime(); //把结束时间转换为毫秒

	//时间差
	var leftTime = end-now; //结束时间与当前时间的毫秒差
	//定义变量 d,h,m,s保存倒计时的时间
	var d,h,m,s;
	if (leftTime>=0) { //毫秒差大于0，表示还没有结束
		d = Math.floor(leftTime/1000/60/60/24); //计算天数（1000毫秒=1秒，60秒=1分钟，60分钟=1小时，24小时=1天），取最小值
		h = Math.floor(leftTime/1000/60/60%24); //计算小时，取余数的最小值
		m = Math.floor(leftTime/1000/60%60); //计算分钟，取余数的最小值
		s = Math.floor(leftTime/1000%60); //计算秒数，取余数的最小值
	}else{ //毫秒差小于0，表示已经结束，设置天、时、分、秒都为0
		d=0;
		h=0;
		m=0;
		s=0;
	}
	//将倒计时显示到指定ID的DOM元素中
	document.getElementById('day').innerText = d;
	document.getElementById('hour').innerText = h;
	document.getElementById('min').innerText = m;
	document.getElementById('sec').innerHTML = s;
	//递归每秒调用countTime方法，显示动态时间效果
	//setTimeout(countTime,1000);
}

调用函数

静态时间效果

countTime('2024/5/5 00:00:00');

动态时间效果

window.setInterval(function(){
    countTime('2024/5/5 00:00:00');
    }, 1000
);

很简单的代码，明白思路就可以轻松实现。