1. 程式人生 > >js實現倒計時,精確到秒

js實現倒計時,精確到秒

效果圖:

 html程式碼:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" type="text/css" href="css/common.css"/>
        <link rel="stylesheet" type="text/css" href="css/holidayCountdown.css"/>
	</head>
	<body>
		<h1>距離國慶節還剩</h1>
		<strong class="cuntDownBox">
			<strong class="day">0天</strong>
			<strong class="hour">0時</strong>
			<strong class="minute">0分</strong>
			<strong class="second">0秒</strong>
			<strong class="haomiao">0毫秒</strong>
		</div>
		
		<div class="zhufu">
			<p>祝願大家國慶快樂!</p>
			<p style="padding-top: 10px;">2018我們同在!</p>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/holidayCountdown.js"></script>

js程式碼:

function countDown() {
 	var EndTime = new Date('2018/9/30 17:30:00');
 	var NowTime = new Date();
 	var t = EndTime.getTime() - NowTime.getTime();
 	var d=0;
 	var h=0;
 	var m=0;
 	var s=0;
 	var mms=0;
 	if(t>=0){
 		d=Math.floor((t/1000/3600)/24);//計算天數
 		h=Math.floor((t/1000/3600)%24);//計算小時
 		m=Math.floor((t/1000/60)%60);//計算分
 		s=Math.floor(t/1000%60);//計算秒
 		mms=Math.floor(t%1000);//計算毫秒
 		if(d<10){
 			d="0"+d;
 		}
 		if(h<10){
 			h="0"+h;
 		}
 		if(m<10){
 			m="0"+m;
 		}
 		if(s<10){
 			s="0"+s;
 		}
 		if(mms>=0 && mms<=100){
 			mms="0"+1;
 		}else if(mms>=100 && mms<=200){
 			mms="0"+2;
 		}else if(mms>=200 && mms<=300){
 			mms="0"+3;
 		}else if(mms>=300 && mms<=400){
 			mms="0"+4;
 		}else if(mms>=400 && mms<=500){
 			mms="0"+5;
 		}else if(mms>=500 && mms<=600){
 			mms="0"+6;
 		}else if(mms>=600 && mms<=700){
 			mms="0"+7;
 		}else if(mms>=700 && mms<=800){
 			mms="0"+8;
 		}else if(mms>=800 && mms<=900){
 			mms="0"+9;
 		}else if(mms>=900 && mms<=1000){
 			mms="0"+0;
 		}else{
 			mms="0"+0;
 		}
 		$(".day").html(d+"天");
 		$(".hour").html(h+"時");
 		$(".minute").html(m+"分");
 		$(".second").html(s+"秒");
 		$(".haomiao").html(mms+"毫秒");
 	}
 }
 setInterval(countDown,0);