js制作倒计时，天，小时，分，秒

假如一开始不调用一次的话，直接用定时器调用的话就会出现一秒钟的空白时间，所以需要先调用一次再来执行定时器

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		#box {
    
    
			width: 415px;
			height: 200px;
			margin: 200px auto 0;
		}

		/* 青色的盒子剧中对齐 */
		span {
    
    
			display: inline-block;
			width: 100px;
			height: 100px;
			background-color: aquamarine;
			line-height: 100px;
			text-align: center;
			font-size: 32px;
		}
	</style>
</head>

<body>
	<div id="box">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</body>
<script type="text/javascript">
	// 获取所有的span表情，也就是青色的盒子
	let span = document.querySelectorAll('span');
	// 创建终点时间
	let daojishi = +new Date('2021-11-28 12:00:00')
	// 执行函数的方法
	function sj() {
    
    
		// 获得当前的时间
		let shijian = +new Date();
		// 终点时间-当前时间再除以1000得出他的秒数
		let mshu = (daojishi - shijian) / 1000;
		// 获取剩下多少天
		let t = parseInt(mshu / 60 / 60 / 24);
		t = t < 10 ? '0' + t : t;
		span[0].innerHTML = t + '天';
		// 获取剩下多少小时
		let s = parseInt(mshu / 60 / 60 % 24);
		s = s < 10 ? '0' + s : s;
		span[1].innerHTML = s + '时';
		// 获取剩下多少分钟
		let f = parseInt(mshu / 60 % 60);
		f = f < 10 ? '0' + f : f;
		span[2].innerHTML = f + '分';
		// 获取剩下多少秒
		let m = parseInt(mshu % 60);
		m = m < 10 ? '0' + m : m;
		span[3].innerHTML = m + '秒';
	}
	// 一开始调用一次
	sj();
	// 每秒调用
	setInterval(sj, 1000);
</script>

</html>

js制作倒计时，天，小时，分，秒

猜你喜欢