源码如下：
原理很简单，看注释吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jun倒计时</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
p{
font-size: 66px;
text-align: center;
}
p span{
color: red;
background:blanchedalmond;
}
p span .time{
color: black;
background: white;
}
body{
padding-top: 200px;
}
</style>
<body>
<p>距离2019年4月7号</p>
<p>
<span>
<!--这里面内容有js添加-->
</span>
</p>
<script>
function formatNum(time) {
return time < 10 ? "0" + time : "" + time;
}
<!--函数作用：获取目标时间与现在时间的差，把结果处理后，动态填充到body中-->
function getCountdownDate() {
var oDate = new Date();
var oTime = oDate.getTime(); //现在距离1970年的毫秒数
var planDate = new Date("2019/4/7 00:00:00");
var planTime = planDate.getTime();
//var resultSecond = (planTime - oTime) / 1000; //毫秒变秒,这里结果不是整数
var resultSecond = Math.floor((planTime - oTime) / 1000); //毫秒变秒
var day = Math.floor(resultSecond / 86400); //60*60*24=86400秒，即一天的总秒数
resultSecond %= 86400; //取余，得到余下的不到一天的秒数
var hour = Math.floor(resultSecond / 3600); //60*60=3600秒，一个小时的总秒数
resultSecond %= 3600; //取余，得到余下的不到一个小时的秒数
var minute = Math.floor(resultSecond / 60); //... ...
var second = resultSecond % 60 ; //取余，得到余下的不到一分钟的秒数
var str = formatNum(day) + "<span class ='time'>天</span>" +
formatNum(hour) + "<span class ='time'>时</span>" +
formatNum(minute) + "<span class ='time'>分</span>" +
formatNum(second) + "<span class ='time'>秒</span>";
var targetSpan = document.getElementsByTagName("span")[0]; //获取填充的位置
targetSpan.innerHTML = str; //填充
}
getCountdownDate();
setInterval(getCountdownDate,1000);
</script>
</body>
</html>
浏览器结果：
