效果图:
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);