逻辑:
1、目标时间-当前时间(获取的是毫秒数)
2、(总的毫秒数/1000%60)向下取整=相差多少秒
3、(总的毫秒数/1000/60%60)向下取整=相差多少分
4、(总的毫秒数/1000/60/60%24)向下取整=相差多少小时
5、(总的毫秒数/1000/60/60/24)向下取整=相差多少天
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#wrap{
width: 205px;
height: 50px;
overflow: hidden;
border:1px solid #e2e2e2;
border-right: none;
border-radius: 10px;
}
#wrap div{
float: left;
width: 50px;
height: 50px;
box-shadow: -2px -2px 2px #888888 inset;
text-align: center;
line-height: 50px;
border-right: 1px solid #e2e2e2;
}
</style>
</head>
<body>
<div id="wrap">
<div id="day"></div>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
var day=$('#day');
var hour=$('#hour');
var minute=$('#minute');
var second=$('#second');
var target=new Date(2017,9,1,20,0,0);
function check(a){
if(a<10){
a='0'+a;
}
return a;
}
setInterval(function(){
var now=new Date();
var num=parseInt((target-now)/1000);
var dayval=check(parseInt(num/60/60/24));
var hourval=check(parseInt(num/60/60%24));
var minuteval=check(parseInt(num/60%60));
var secondval=check(parseInt(num%60));
day.text(dayval);
hour.text(hourval);
minute.text(minuteval);
second.text(secondval).stop().animate({top:'-50px'},400).animate({top:'50px'},400).animate({top:'0px'},400);
},1000);
</script>
</body>
</html>