JavaScript写时间倒计时

最新推荐文章于 2023-11-14 10:56:21 发布

anni1107qf

最新推荐文章于 2023-11-14 10:56:21 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签： JavaScript setTimeout 倒计时

本文链接：https://blog.csdn.net/anni1107qf/article/details/80814163

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JavaScript的两个计时器setInterval 和setTimeout 来简单的写一个当天的时间倒计时，主要就是时间的计算，先看下实现当天时间的倒计时，全部代码：

<html>
	<head>
		<meta charset="UTF-8"/>
		<title>count down</title>
		<style type="text/css">
			body{
				background-color: #00502D;
				color: #ffffff;
			}
			#show{
				position: absolute;
				bottom: 0;
				right: 20px;
			}
		</style>
	</head>
	<body>
		<h2 id="show"></h2>
		<script type="text/javascript">
			var fuTime = new Date("2018/6/26 18:00:00");
			var timer = "";
			//setInterval 延时1秒
//			timer = setInterval(function (){
//				var now = new Date();
//				var hour = parseInt((fuTime-now)/1000/60/60);
//				hour<10 && (hour = "0"+hour);
//				var min = parseInt((fuTime-now)%(1000*60*60)/1000/60);
//				min<10 && (min = "0"+min);
//				var sec = parseInt((fuTime-now)%(1000*60)/1000);
//				sec<10 && (sec = "0"+sec);
//				document.getElementById("show").innerHTML = hour+" : "+min+" : "+sec;
//				if(hour==0 && min==0 && sec==0){
//					clearTimeout(timer);
//					timer = null;
//				}
//			},1000);
			
			//setTimeout
			(function show(){
				var now = new Date();
				var hour = parseInt((fuTime-now)/1000/60/60);
				hour<10 && (hour = "0"+hour);
				var min = parseInt((fuTime-now)%(1000*60*60)/1000/60);
				min<10 && (min = "0"+min);
				var sec = parseInt((fuTime-now)%(1000*60)/1000);
				sec<10 && (sec = "0"+sec);
				document.getElementById("show").innerHTML = hour+" : "+min+" : "+sec;
				timer = setTimeout(show,1000);
				if(hour==0 && min==0 && sec==0){
					clearTimeout(timer);
					timer = null;
				}
			})();
			
		</script>
	</body>
</html>

其中两种方法都写了，也注释出来了，setInterval的话会有一秒的延时，我没有处理，如果想用这个方法，那就在计时器开始之前先计算结果把它显示一下就可以了

如果想要倒计时天数，那就这样写，只写JS部分：

var now = new Date();
var day = parseInt((fuTime-now)/1000/60/60/24);
var hour = parseInt((fuTime-now)%(1000*60*60*24)/1000/60/60);
var min = parseInt((fuTime-now)%(1000*60*60)/1000/60);
var sec = parseInt((fuTime-now)%(1000*60)/1000);
document.getElementById("show").innerHTML =day+" 天 "+ hour+" 小时 "+min+" 分钟 "+sec+" 秒 ";
timer = setTimeout(show,1000);
if(hour==0 && min==0 && sec==0){
	clearTimeout(timer);
	timer = null;
}

主要就是计算的麻烦一点