js制作倒计时效果
该程序可以计算任意指定的两个日期中间的差值。
本例子的指定日期是2017年1月1日，当前时间是2016年10月21日；计算它们之间的差值，在网页上显示如图所示：
关键部分代码：
1 var nowtime = new Date().getTime();//获取当前时间的毫秒数 2 var wtime = new Date("2017,1,1").getTime();//获取指定日期的毫秒数 3 var lefttime = (wtime-nowtime)/1000;//获取指定日期和当前时间的相差的秒数 4 var day = parseInt(lefttime/60/60/24);//转化为天数 5 var hour = parseInt(lefttime/60/60%24);//转化为小时数 6 var min = parseInt(lefttime/60%60);//转化为分钟数 7 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得到不足一分钟的秒数。
完整代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 </head> 7 <style type="text/css"> 8 div{ 9 width:500px; 10 height:100px; 11 margin:200px auto; 12 font-size: 20px; 13 } 14 </style> 15 <body> 16 <div> 17 距离2017年元旦节还有: 18 <span id="day"></span> 天 19 <span id="hour"></span> 小时 20 <span id="min"></span> 分钟 21 <span id="sec"></span> 秒 22 </div> 23 <script type="text/javascript"> 24 function move(){ 25 var nowtime = new Date().getTime();//获取当前时间的毫秒数 26 var wtime = new Date("2017,1,1").getTime();//获取指定日期的毫秒数 27 var lefttime = (wtime-nowtime)/1000;//获取指定日期和当前时间的相差的秒数 28 var day = parseInt(lefttime/60/60/24);//转化为天数 29 var hour = parseInt(lefttime/60/60%24);//转化为小时数 30 var min = parseInt(lefttime/60%60);//转化为分钟数 31 var sec = parseInt(lefttime%60);//转化为秒数 32 33 document.getElementById("day").innerHTML = day; 34 document.getElementById("hour").innerHTML = hour; 35 document.getElementById("min").innerHTML = min; 36 document.getElementById("sec").innerHTML = sec; 37 } 38 move(); 39 setInterval(move,1000); 40 </script> 41 </body> 42 </html>
如有代码上的错误或者不同的思路和建议，欢迎大家指正。
