js-实现倒计时效果

最新推荐文章于 2023-01-31 19:56:51 发布

老衲的少女心i

最新推荐文章于 2023-01-31 19:56:51 发布

阅读量300

点赞数

分类专栏： javascript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_42592823/article/details/115334041

版权

JavaScript 倒计时时间戳日期处理前端开发

关键词由CSDN通过智能技术生成

javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>倒计时练习</title>
	</head>
	<body>
		<div id="con"></div>
		<script>
			var oCon = document.getElementById('con');
			var duanWu=new Date("2021-6-13 17:00:00");
			setInterval(function(){
				//每次都要获取最新的时间
				var now=Date.now();
				//计算时间戳
				var allTime=duanWu-now;
				console.log(allTime);
				
				//想要知道时间戳是多少天
				//我们就要知道，一天是多少毫秒
				var day=Math.floor(allTime/(1000*60*60*24));
				//console.log(day);
				
				//把总时间戳除以一天的毫秒数，取余，得到不满足一天的毫秒数，然后计算小时
				var _day=allTime%(1000*60*60*24);
				
				//拿到不满足一天的毫秒数，就可以计算小时
				var hours=Math.floor(_day/(1000*60*60));
				var _hours=_day%(1000*60*60);
				
				//剩余分钟数
				var minutes=Math.floor(_hours/(1000*60));
				var _minutes=_hours%(1000*60);
				
				//剩余秒数
				var secondes=Math.floor(_minutes/(1000));
				
			
				//不满10  添0
				secondes = secondes < 10 ? "0" + secondes : secondes;
				
				var milliSecondes = _minutes % 1000;
				
				oCon.textContent="距离端午节还剩："+day+"天"+hours+"小时"+minutes+"分钟"+secondes+"秒"+milliSecondes+"毫秒";
			},1)
		</script>
	</body>
</html>