JS倒计时案例

最新推荐文章于 2024-07-30 22:36:34 发布

m0_62358560

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量124

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_62358560/article/details/120686431

版权

分析：
核心算法∶输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒
相减，比如05分减去25分，结果会是负数的。
用时间戳来做。用户输入时间总的亳秒数减去现在时间的总的亳秒数，得到的就是剩余时
间的亳秒数。
把剩余时间总的亳秒数转换为天、时、分、秒（时间戳转换为时分秒)
转换公式如下:
d = parselnt(总秒数/60/60/24); //计算天数

h = parselnt(总秒数/60/60 %24); //计算小时.

m = parselnt(总秒数/60 %60); //计算分数

s = parselnt(总秒数%60); //计算当前秒数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>倒计时</title>
		<style type="text/css">
			header {
				margin: 20px 60px;
			}

			div {
				margin-left: 50px;
				color: #000000;
			}

			span {
				display: inline-block;
				width: 40px;
				height: 40px;
				text-align: center;
				background-color: #222;
				color: #fff;
				line-height: 40px;
				margin: 0 10px;
			}
		</style>
	</head>
	<body>
		<header><h2>2022北京冬奥会倒计时：</h2></header>
		<div>
			<span class="day"></span>天
			<span class="hour"></span>时
			<span class="minute"></span>分
			<span class="second"></span>秒
		</div>
		<script type="text/javascript">
			var day = document.querySelector('.day');
			var hour = document.querySelector('.hour');
			var minute = document.querySelector('.minute');
			var second = document.querySelector('.second');
			var inputTime = new Date('2022-2-4 19:30:00');
			countDown();
			setInterval(countDown, 1000);

			function countDown() {
				var nowTime = new Date();
				var times = (inputTime - nowTime) / 1000;
				var d = parseInt(times / 60 / 60 / 24);
				d = d < 10 ? '0' + d : d;
				day.innerHTML = d;
				var h = parseInt(times / 60 / 60 % 24);
				h = h < 10 ? '0' + h : h;
				hour.innerHTML = h;
				var m = parseInt(times / 60 % 60);
				m = m < 10 ? '0' + m : m;
				minute.innerHTML = m;
				var s = parseInt(times % 60);
				s = s < 10 ? '0' + s : s;
				second.innerHTML = s;
			}
		</script>
	</body>
</html>

m0_62358560

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS倒计时案例

分析：核心算法∶输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的。用时间戳来做。用户输入时间总的亳秒数减去现在时间的总的亳秒数，得到的就是剩余时间的亳秒数。把剩余时间总的亳秒数转换为天、时、分、秒（时间戳转换为时分秒)转换公式如下:d = parselnt(总秒数/60/60/24); //计算天数h = parselnt(总秒数/60/60 %24); //计算小时.m = parselnt(总秒数/60 %6...
复制链接

扫一扫