精确到毫秒的倒计时
Html 页面 ：
<html>
<head>
<style>
div{
width: 100%;
text-align: center;
font-size: 20px;
color: red;
margin-top: 200px;
}
</style>
</head>
<div id="go">
</div>
<body>
<script>
function countTime(time,id) {
var date = new Date();
var now = date.getTime();
var endDate = new Date(time);//设置截止时间
var end = endDate.getTime();
var leftTime = end - now; //时间差
var d, h, m, s, ms;
if(leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
ms = Math.floor(leftTime % 1000);
if(ms < 100) {
ms = "0" + ms;
}
if(s < 10) {
s = "0" + s;
}
if(m < 10) {
m = "0" + m;
}
if(h < 10) {
h = "0" + h;
}
//将倒计时赋值到div中
document.getElementById(id).innerHTML = "距离活动结束还有："+d + "天" + h + "时" + m + "分" + s + "秒"+ ms + "毫秒";
} else {
console.log('已截止')
//将倒计时赋值到div中
document.getElementById(id).innerHTML = "活动截止"
}
//递归每秒调用countTime方法，显示动态时间效果
return leftTime
}
//调用方式 需要传入 结束时间 和 倒计时内容所在的id名称
var s = setInterval(function (){
var dates = countTime("2020-3-22 10:32:00", "go");
if(dates<=0) {
clearInterval(s)
}
},50)
</script>
</body>
</html>
距离某个时间点的倒计时：
<html>
<head>
<meta charset="UTF-8">
<title>距离某个时间点倒计时</title>
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
console.log("当前时间="+date);
var now = date.getTime();
//设置截止时间
var str="2020/3/20 00:00:00";
var endDate = new Date(str);
var end = endDate.getTime();
//时间差
var leftTime = end-now;
//定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (leftTime>=0) {
d = Math.floor(leftTime/1000/60/60/24);
h = Math.floor(leftTime/1000/60/60%24);
m = Math.floor(leftTime/1000/60%60);
s = Math.floor(leftTime/1000%60);
}
console.log("3月20日前----还有："+d+"天"+h +"小时"+m+"分"+s +"秒");
//将倒计时赋值到div中
var cont=document.getElementById("day");
console.log('innerText cont= '+ cont.innerHTML);
document.getElementById('day').innerHTML = d+"天";
document.getElementById('hour').innerHTML = h+"时";
document.getElementById('minute').innerHTML = m+"分";
document.getElementById('second').innerHTML= s+"秒";
console.log("3月20日还有："+d+"天"+h +"小时"+m+"分"+s +"秒");
}
//递归每秒调用countTime方法，显示动态时间效果
// setTimeout(countTime,1000);
setInterval(countTime,1000);
</script>
</head >
<body οnlοad="countTime()" >
距离活动结束还有
<div>
<span id="day">00</span>
<span id="hour">00</span>
<span id="minute">00</span>
<span id="second">00</span>
</div>
</body>
</html>
