js倒计时案例

最新推荐文章于 2022-07-22 19:15:23 发布

秃头怪yae

最新推荐文章于 2022-07-22 19:15:23 发布

阅读量463

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_65325072/article/details/123495085

版权

核心思想：用输入时间的时间戳减去现在时间的时间戳即为倒计时的时间总毫秒数，实现js的倒计时效果

注：+new Date()

js在某个数据类型前使用"+",是为了将该数据类型转化为Number型；

new Date()返回的是标准时间：

+new Date()返回的是时间的总的秒数

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				margin: 100px;
			}

			span {
				display: inline-block;
				height: 30px;
				width: 30px;
				background-color: #000000;
				color: #FFFFFF;
				line-height: 30px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			<span class="hour"></span>
			<span class="minute"></span>
			<span class="second"></span>
		</div>
		<script type="text/javascript">
			//1、获取元素
			var hour = document.querySelector('.hour');
			var minute = document.querySelector('.minute');
			var second = document.querySelector('.second');
			var inputTime = +new Date('2022-8-6 01:00:00');//设定时间
			countDown(); //先调用一次，防止第一次刷新出现空白
			//2、开启定时器
			setInterval(countDown, 1000); //每隔1s调用这个函数
			//方法计算剩余时间
			function countDown() {
				var nowTime = +new Date(); //返回当前时间的总毫秒数
				console.log(nowTime)
				var times = (inputTime - nowTime) / 1000; //剩余时间的秒数
				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>

实现效果：

秃头怪yae

关注

0
点赞
踩
0

收藏

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

核心思想：用输入时间的时间戳减去现在时间的时间戳即为倒计时的时间总毫秒数，实现js的倒计时效果注：+new Date()js在某个数据类型前使用"+",是为了将该数据类型转化为Number型；new Date()返回的是标准时间：+new Date()返回的是时间的总的秒数代码实现：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <t...
复制链接

扫一扫