倒计时功能制作

最新推荐文章于 2024-10-16 16:26:58 发布

萝卜头不吃萝卜头

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量180

点赞数 4

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/SqlloveSyn/article/details/126179449

版权

今天制作一个商城项目距离抢购还剩多长时间的一个小功能

首先要知道这个倒计时是不断的变化的，所以需要用到定时器来自动变化(setInterval)，有三个标签存放时分秒，再利用innerHTML将计算出来的时间放入三个标签内，第一次执行也是间隔毫秒数，因此刷新页面会有空白，我们最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</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-5 23:59:00'); // 返回的是用户输入时间总的毫秒数
            
            // 先调用一次这个函数，防止第一次刷新页面有空白
			countDown();
            // 开启定时器

			setInterval(countDown, 1000);
			function countDown() {
				var nowTime = new Date(); // 返回的是当前时间总的毫秒数
                // 输入时间减去当前时间再除以1000，得到剩余秒数
                // times就等于剩余秒数
				var times = (inputTime - nowTime) / 1000;
                // (times / 60 /60 % 24)这是计算时间的公式
				var h = parseInt(times / 60 / 60 % 24); //时
                // h < 10就在前面加个0 因为我们这个功能的效果是时分秒都是两位数的，
                // 小于10就是1~9 大于10就是10~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>