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

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

下面本作就以“距离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>

最终浏览器显示的结果如下图所示:

js倒计时

想要看时间一秒一秒地减少,自己动手写一写或者复制本作的源码到html文件,用浏览器打开就能看到了。

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:,
顶部