该程序可以计算任意指定的两个日期中间的差值。

本例子的指定日期是2017年1月1日,当前时间是2016年10月21日;计算它们之间的差值,在网页上显示如图所示:

js制作倒计时效果-LMLPHP

关键部分代码:

 var nowtime = new Date().getTime();//获取当前时间的毫秒数
var wtime = new Date("2017,1,1").getTime();//获取指定日期的毫秒数
var lefttime = (wtime-nowtime)/1000;//获取指定日期和当前时间的相差的秒数
var day = parseInt(lefttime/60/60/24);//转化为天数
var hour = parseInt(lefttime/60/60%24);//转化为小时数
var min = parseInt(lefttime/60%60);//转化为分钟数
var sec = parseInt(lefttime%60);//转化为秒数

解析

  lefttime获得的是指定时间和当前时间的差值的秒数,我们要做的就是把秒数分别转化为天数,小时数,分钟数和秒数,

  • 转化为天数:用lefttime除以(60*60*24)得到的是结果是71.0685的小数,我们此时需要的是整数,故用parseInt()方法获取整数;
  • 转化为小时数:之前得到有小数点的天数是71.0685,天数已经取整得到了71天,那么剩余的小数不足一天则转化为小时数,用lefttime除以(60*60)得到差值的小时数,然后进行取余%24得到不足一天的小时数,此时小时数可能是带有小数点的,所以也用parseInt()方法取整。
  • 转化为分钟数:同理,分钟数是之前得到的有小数点的小时数后面的小数,所以此时用lefttime除以60得到差值的分钟数,然后取余%60得到不足一小时的分钟数,然后再次取整。
  • 转化为秒数:用lefttime取余%60得到不足一分钟的秒数。

完整代码:

 <!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<style type="text/css">
div{
width:500px;
height:100px;
margin:200px auto;
font-size: 20px;
}
</style>
<body>
<div>
距离2017年元旦节还有:
<span id="day"></span> 天
<span id="hour"></span> 小时
<span id="min"></span> 分钟
<span id="sec"></span> 秒
</div>
<script type="text/javascript">
function move(){
var nowtime = new Date().getTime();//获取当前时间的毫秒数
var wtime = new Date("2017,1,1").getTime();//获取指定日期的毫秒数
var lefttime = (wtime-nowtime)/1000;//获取指定日期和当前时间的相差的秒数
var day = parseInt(lefttime/60/60/24);//转化为天数
var hour = parseInt(lefttime/60/60%24);//转化为小时数
var min = parseInt(lefttime/60%60);//转化为分钟数
var sec = parseInt(lefttime%60);//转化为秒数 document.getElementById("day").innerHTML = day;
document.getElementById("hour").innerHTML = hour;
document.getElementById("min").innerHTML = min;
document.getElementById("sec").innerHTML = sec;
}
move();
setInterval(move,1000);
</script>
</body>
</html>

如有代码上的错误或者不同的思路和建议,欢迎大家指正。

05-11 22:15