javascript倒计时案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/* 
			 * 当前时间:var d=new Date()
			 * 指定时间:var d=new Date("09/22/2018 12:22:22");	大于当前时间
			 * 	可对d进行加减乘除,会隐式转换为时间戳
			 * 获取指定对象的时间戳:d.getTime()
			 * 
			 * 获取当前时间戳:var time=Date.now();
			 * 
			 * 把剩余时间的秒数转换为天、时、分、秒
			 * 	天数:d=parseInt(总秒数/60/60/24)
			 * 	小时:h=parseInt(总秒数/60/60%24)
			 * 	分数:m=parseInt(总秒数/60%60)
			 * 	秒数:s=parseInt(总秒数%60)
			 */
			window.onload=function(){
				var	shi=document.getElementsByTagName("span")[0];
				var	fen=document.getElementsByTagName("span")[1];
				var	miao=document.getElementsByTagName("span")[2];
				timego();		//防止刷新会有空白
				var timer=setInterval(timego,1000);
				function timego(){
					var time="06/25/2020 23:19:00";				//未来时间,要大于当前时间
					var nowTime=new Date();						//当前时间
					var inputTime=new Date(time);				//指定未来时间
					var times=((inputTime-nowTime)/1000);					
					//时间差的总秒数			时间对象相减会隐式转为时间戳,所以要/1000

					var dif=inputTime-nowTime;
					if(dif<0){
						//关闭计时器,或者渲染其他,或跳转其他页面
						clearInterval(timer);
						document.querySelector('.out').innerHTML = '到点了';
						return false;
					}

					var h=parseInt(times/60/60); 
					h= h<10?"0"+h:h;
					var m=parseInt(times/60%60);
					m= m<10?"0"+m:m;
					var s=parseInt(times%60);
					s= s<10?"0"+s:s;
					shi.innerHTML=h;
					fen.innerHTML=m;
					miao.innerHTML=s; 
				}
			};
		</script>
		<style type="text/css">
			.out {
				width: 96px;
				height: 30px;
				display: flex;
				justify-content: space-between;
				border: 1px solid;
				padding: 10px;
			}
			span {
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: yellowgreen;
				border-radius: 8px;
			}			
		</style>
	</head>
	<body>
		<div class="out">
			<span></span>
			<span></span>
			<span></span>
		</div>
	</body>
</html>

javascript倒计时案例_第1张图片

你可能感兴趣的:(javascript)