js实现倒计时器

最新推荐文章于 2024-05-22 01:53:01 发布

加油挣米粒呀

最新推荐文章于 2024-05-22 01:53:01 发布

阅读量1.2k

点赞数 2

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45147812/article/details/106801514

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="time_back">
			<span>0</span>
			<span>0</span>
			<span>:</span>
			<span>0</span>
			<span>0</span>
			<span>:</span>
			<span>0</span>
			<span>0</span>
		</div>
		<script>
			window.onload=function(){
				timeBack(3700);//3700秒倒计时
			}
			function timeBack(totalTime){
				// 获取倒计时的所有span
				var span = document.querySelector(".time_back").querySelectorAll("span");
				// 开启定时器
				var timer = setInterval(function(){
					totalTime--;
					// 判断倒计时时间是否已经完成
					if(totalTime<0){
						clearInterval(timer);
						return;
					}
					// 得到剩余时间的时分秒
					var hour = Math.floor(totalTime/3600);
					// console.log(hour)
					var minute = Math.floor(totalTime%3600/60);
					var second = Math.floor(totalTime%60);
					// 将时间填充到span中
					span[0].innerHTML=Math.floor(hour/10);
					span[1].innerHTML=Math.floor(hour%10);
					span[3].innerHTML=Math.floor(minute/10);
					span[4].innerHTML=Math.floor(minute%10);
					span[6].innerHTML=Math.floor(second/10);
					span[7].innerHTML=Math.floor(second%10);
					
				},1000)
			}
		</script>
	</body>
</html>

加油挣米粒呀

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js实现倒计时器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="time_back"> 0 0 :</span
复制链接

扫一扫