js倒计时功能

lvbb66

于 2024-07-13 15:54:01 发布

阅读量180

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2302_80798583/article/details/140401368

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				
				background-color: black;
				color: aliceblue;
				font-size: 50px;
				
			}
		</style>
	</head>
	<body>
		<div>
			<span class="shi">1</span>
			<span class="fen">2</span>
			<span class="miao">3</span>
		</div>
 
		<script>
			var shi = document.getElementsByClassName('shi')[0];// 小时的盒子
			var fen = document.getElementsByClassName('fen')[0];// 分钟的盒子
			var miao = document.getElementsByClassName('miao')[0];// 秒数的盒子
			var inputTime = new Date('2022-8-15 23:59:00');// 返回的是用户输入时间总的毫秒数
			countDown();// 我们先调用一次这个函数，防止第一次刷新页面有空白
			// 开启定时器
			setInterval(countDown, 1000);
			function countDown() {
				var nowTime = new Date();// 返回的是当前时间总的毫秒数
				var times = (inputTime - nowTime) / 1000;
				var h = parseInt(times / 60 / 60 % 24); //时
				h = h < 10 ? '0' + h : h;
				shi.innerHTML = h + '时';
				
				var m = parseInt(times / 60 % 60); //分
				m = m < 10 ? '0' + m : m;
				fen.innerHTML = m + '分';
				
				var s = parseInt(times % 60); //分
				s = s < 10 ? '0' + s : s;
				miao.innerHTML = s + '秒';
				
			}
		</script>
	</body>
</html>

首先我们要知道这个倒计时是不断变化的，索引要用到定时器来让它自动变化。

这三个盒子里分别存放的是时分秒。

三个盒子利用innerHTML放入计算好的时间。

第一次执行也是间隔毫秒数，所以刷新页面会有空白。

最好用封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白的问题。