倒计时效果，JavaScript简洁源码+注释

最新推荐文章于 2023-04-01 16:29:22 发布

雨飞叶

最新推荐文章于 2023-04-01 16:29:22 发布

阅读量285

点赞数

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/heartmvcom/article/details/104808311

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在网上购物我们不时会看到一些倒计时抢购的现象，这种“倒计时”效果还是挺有趣的，今天就说说这个倒计时效果的实现方法。

下面本作就以“距离2021年还剩下多少时间”为例子来演示一下（具体看代码与注释）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
</head>

<body>
	<h1>距离2021年还剩下：<span  id="span" style="color:#C50707;"></span></h1>
	<script>
		//设置定时器，每秒更新一下
		setInterval(function(){
			//获取当前的日期时间的时间戳
			var timer1 = +new Date();
			//定义未来的日期时间的时间戳，这里定为2021年1月1日0时0分0秒（大家可根据情况改变）
			var timer2 = +new Date('2021-1-1 00:00:00');
			//时间差,单位是毫秒
			var timer = (timer2 - timer1) / 1000; //除1000表示把单位 毫秒 变成 秒
			//天数
			var day = parseInt(timer / 60 /60 / 24); //获取天数的公式（下面一样）
			day = day < 10 ? '0' + day : day; //若天数小于10则在前面加0（下面一样）
			//小时
			var h = parseInt(timer / 60 / 60 % 24);
			h = h < 10 ? '0' + h : h;
			//分钟
			var m = parseInt(timer / 60 % 60);
			m = m < 10 ? '0' + m : m;
			//秒数
			var s = parseInt(timer % 60);
			s = s <10 ? '0' + s : s;
			//把时间组合起来
			var lastTimer = day + '天' + h + '时' + m + '分' + s + '秒';
			document.getElementById('span').innerHTML=lastTimer;
		}, 1000);
		
	</script>
</body>
</html>

最终浏览器显示的结果如下图所示：
在这里插入图片描述
想要看时间一秒一秒地减少，自己动手写一写或者复制本作的源码到html文件，用浏览器打开就能看到了。

雨飞叶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
倒计时效果，JavaScript简洁源码+注释

在网上购物我们不时会看到一些倒计时抢购的现象，这种“倒计时”效果还是挺有趣的，今天就说说这个倒计时效果的实现方法。下面本作就以“距离2021年还剩下多少时间”为例子来演示一下（具体看代码与注释）：<!doctype html><html><head><meta charset="utf-8"><title>heartmv.co...
复制链接

扫一扫