天天看點

JavaScript寫時間倒計時

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;
}
           

主要就是計算的麻煩一點

繼續閱讀