js-时间对象实现倒计时效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				//倒计时原理  时间差 = 未来时间 - 当前时间
				//设置未来时间
				var future = new Date(2020,10,11,0,0,0);//注月份0-11
				// console.log(future)
				var current = null;//当前时间
				var hh = document.querySelector('h1');
				
				setInterval(function(){
					current = new Date();//每1s获取一次
					var len = future - current;	//获得时间差
					// console.log(len)
					//毫秒转换成秒为单位进行计算
					len /= 1000;
					//天		86400 = 60*60*24
					var d = parseInt(len / 86400);
					
					//小时	秒 % 天  / 小时
					var h = parseInt(len % 86400 / 3600);
					
					//分		秒 % 小时  /	 分
					var m = parseInt(len % 3600 / 60);
					
					//秒		秒 % 分
					var s = parseInt(len % 60);
					
					hh.innerText = '当前时间距离2020双十一还有'+d+'天'+zero(h)+'小时'+zero(m)+'分'+zero(s)+'秒'
				},1000);
				
				function zero(n){
					return n<10 ? '0'+ n : n;
				}
			}
		</script>
	</head>
	<body>
		<h1></h1>
	</body>
</html>

posted @ 2023-04-01 16:29  JackieDYH  阅读(99)  评论(0)  编辑  收藏  举报  来源