使用JS实现倒计时

最新推荐文章于 2023-07-29 14:11:01 发布

八品山竹

最新推荐文章于 2023-07-29 14:11:01 发布

阅读量202

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Dobelwl/article/details/130072309

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		距五一劳动节还有：
		<div class="time">
			<span id="day"></span>天
			<span id="hour"></span>小时
			<span id="min"></span>分钟
			<span id="sec"></span>秒
		</div>
	</body>
	<script type="text/javascript">
		//需要两个时间戳 目标的时间 inputTime=+new Date(time)和当前的时间 nowTime=Date.now()
		var inputTime=+new Date('2023-05-01 00:00:00');
		var d,h,m,s,counttime;
		var day=document.getElementById('day');
		var hour=document.getElementById('hour');
		var min=document.getElementById('min');
		var sec=document.getElementById('sec');
		
		//调用setInterval()方法：间隔指定的毫秒数不停地执行指定的代码
		setInterval(function(){
			countdown();
		},1000)
		
		//计算时间
		function countdown(){
			var nowTime=Date.now();
			counttime=parseInt((inputTime-nowTime)/1000);//换算还有多少秒：1秒=1000毫秒
			//秒
			s=parseInt(counttime%60);
			s =s <10 ? '0'+s : s;
			sec.innerHTML = s; 
			//分
			m =parseInt((counttime/60)%60);
			m =m <10 ? '0'+m : m;
			min.innerHTML = m;
			//小时
			h=parseInt((counttime/60/60)%24);
			h =h <10 ? '0'+h : h;
			hour.innerHTML = h;
			//天
			d =parseInt((counttime/60/60)/24);
			d =d <10 ? '0'+d : d;
			day.innerHTML = d;
		}

	</script>
</html>

效果图：