"国庆倒计时"代码及思路

最新推荐文章于 2022-10-08 11:03:04 发布

xr1106

最新推荐文章于 2022-10-08 11:03:04 发布

阅读量1.2k

点赞数 3

分类专栏： JavaScript 随笔~ 文章标签： js

本文链接：https://blog.csdn.net/weixin_43312825/article/details/100785995

版权

随笔~ 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>国庆倒计时</title>
	<style>
		h1 {
			color: #e92322;
			margin: 200px auto;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1></h1>
	<script>
		// 1.获取DOM元素，存放渲染页面的内容
		var ele = document.getElementsByTagName('h1')[0];
		// 2.创建定时器，倒计时
		var timer = setInterval(fn,1000);
		function fn(){
			// 3.计算当前时间与'2019-10-01'之间的时间戳的差
			var dateNow = new Date();
			var dateFixed = new Date('2019-10-01');
			var timeStamp = dateFixed.getTime() - dateNow.getTime();

			// 4.将时间戳的差分别转换为天、小时、分钟、秒
			var d = parseInt(timeStamp/1000/60/60/24);
			var h = parseInt(timeStamp/1000/60/60%24);
			var m = parseInt(timeStamp/1000/60%60);
			var s = parseInt(timeStamp/1000%60);

			// 5.位数标准化
			d = d < 10 ? "0" + d : d;
			h = h < 10 ? "0" + h : h;
			m = m < 10 ? "0" + m : m;
			s = s < 10 ? "0" + s : s;

			// 6.判断时间戳
			if( timeStamp > 0) {
				ele.innerHTML = "距离国庆还有"+d+"天"+h+"小时"+m+"分"+s+"秒";
				return;
				clearInterval(timer);
			}else {
				ele.innerHTML = "国庆快乐！"
			}
		}
	</script>
</body>
</html>

xr1106

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
"国庆倒计时"代码及思路

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>国庆倒计时</title> <style> h1 { color: #e92322; margin: 200px auto; text-align:...
复制链接

扫一扫