实现原理很容易，只需要把各时间单位——例如天：86400000毫秒，用目标时间除以天的毫秒数既可以得到剩余多少天，时分秒可以以此类推。当然反推过来也可以判断剩余多少年月周等。以下为实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>倒计时</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
#data{
text-align: center;
font-size: 50px;
}
</style>
</head>
<body>
<p id="data"></p>
<script type="text/javascript">
var timer = null;
var res = null;
//设置定时器每隔一秒，计算一次剩余时间
function resCountDown(time){
if(timer || !time)
return;
timer = setInterval(function(){
var result = getCountDown(time, [
{unit: 86400000, append: '天 '},
{unit: 3600000, append: ':'},
{unit: 60000, append: ':'},
{unit: 1000, append: ' '}
]);
res = result.substr(0, 1) === '0'?result.substr(1):result;
var dataDom = document.getElementById('data');
dataDom.innerText = res;
time-= 1000;
}, 1000)
}
//根据秒计算剩余天数时分秒
function getCountDown(seconds, level){
var result = '';
var time = Math.floor(seconds / level[0].unit);
result += time<10?'0'+time:time;
result += level[0].append;
var sec = seconds - (time * level[0].unit);
level.splice(0, 1);
if(level.length > 0){
result += getCountDown(sec, level);
}
return result;
}
var target = new Date('2022/01/26 00:00:00').getTime();
var now = new Date().getTime();
//调用计时器方法
resCountDown(target - now);
</script>
</body>
</html>
如此一来就可以看到，目标时间距离现在还有多久了。
效果图
当然也可以看看还有多少周多少月多少年之类的。只需调整传入的参数
月份是用 365/12 的值30.42乘以天的毫秒数 所得。不够严谨有兴趣的朋友可以改进
var result = getCountDown(time, [
{unit: 2628288000, append: '月 '},
{unit: 604800000, append: '周 '},
{unit: 86400000, append: '天 '},
{unit: 3600000, append: ':'},
{unit: 60000, append: ':'},
{unit: 1000, append: ' '}
]);
效果图
