1.定义一个定时器
var div=document.getElementsByTagName("div")[0];
setInterval(fn,1000);
2.方法封装
function fn() {
var futureTime=new Date("2019/04/24 08:00:00");
var nowTime=new Date();
var sum=futureTime.getTime()-nowTime.getTime();
var day=parseInt(sum/1000/60/60/24);
var hour=parseInt(sum/1000/60/60%24);
var minute=parseInt(sum/1000/60%60);
var second=parseInt(sum/1000%60);
var ms=parseInt(sum%1000);
3.问题处理:所有的时间当小于10的时候自动补0,毫秒补00;
day=day<10?"0"+day:day;
hour=hour<10?"0"+hour:hour;
minute=minute<10?"0"+minute:minute;
second=second<10?"0"+second:second;
if(ms<0){
ms="00"+ms;
}else if(ms<100){
ms="0"+ms;
}
4.内容输出
div.innerHTML="距离苹果发布会开始时间还有:"+day+"天"+hour+"时"+minute+"分"+second+"秒"+ms+"毫秒";
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:880px;
margin: 200px auto;
color: red;
text-align: center;
font:600 30px/30px "微软雅黑";
}
</style>
</head>
<body>
<div></div>
<script>
//定义一个定时器
var div=document.getElementsByTagName("div")[0];
setInterval(fn,1000);
//方法封装
function fn() {
var futureTime=new Date("2019/04/24 08:00:00");
var nowTime=new Date();
var sum=futureTime.getTime()-nowTime.getTime();
var day=parseInt(sum/1000/60/60/24);
var hour=parseInt(sum/1000/60/60%24);
var minute=parseInt(sum/1000/60%60);
var second=parseInt(sum/1000%60);
var ms=parseInt(sum%1000);
//问题处理:所有的时间当小于10的时候自动补0,毫秒补00;
day=day<10?"0"+day:day;
hour=hour<10?"0"+hour:hour;
minute=minute<10?"0"+minute:minute;
second=second<10?"0"+second:second;
if(ms<0){
ms="00"+ms;
}else if(ms<100){
ms="0"+ms;
}
div.innerHTML="距离苹果发布会开始时间还有:"+day+"天"+hour+"时"+minute+"分"+second+"秒"+ms+"毫秒";
}
</script>
</body>
</html>