思路:利用日期函数Date(),分别得到终点时间和当前时间距离1970.1.1的毫秒数,然后相减,得到相差毫秒数
然后利用相差毫秒数去计算月天时分秒。然后使用定时器设定每秒钟执行1次上述行为。(注意使用parseInt()取整)
关键知识:日期函数Date(),定时器setInterval()
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
#box {
width:400px;
height: 200px;
line-height: 200px;
margin: 100px auto;
color:red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
setInterval(fun,1000);
function fun(){
var date = new Date();//得到当前时间
// console.log(date);
var endTime = new Date("2018/9/1");//设定终点时间
// console.log(endTime);
var ms = endTime.getTime()-date.getTime();//得到相差毫秒数
// console.log(ms);
var m = parseInt(ms/(1000*60*60*24*30)%12);//得到距离月份并取整,此处默认每月30天
var d = parseInt(ms/(1000*60*60*24)%30);//得到天数
var h = parseInt(ms/(1000*60*60)%24);//得到小时数
var min = parseInt(ms/(1000*60)%60);//得到分钟数
var s = parseInt(ms/1000%60);//得到秒数
m<10 ? m='0'+m : m;//如果月份数小于10,显示为0x,大于或等于则为原值
d<10 ? d='0'+d : d;
h<10 ? h='0'+h : h;
min<10 ? min='0'+min : min;
s<10 ? s='0'+s : s;
box.innerHTML = "距离9月1号开学还有 "+m+"月"+d+"天"+h+"小时"+min+"分"+s+"秒";
}
</script>
</html>
具体效果可见:倒计时