倒计时的JS实现方法

倒计时其实就是Date类的一些计算与处理，主要是些繁琐的工作。为了省掉他人的功夫以及方便后来的使用，我已经将倒计时主要处理方法封装起来了。方法名为：fnTimeCountDown(参数1, 参数2)。

具体使用如下，首先，调用倒计时js脚本，您可以在页面的任何位置嵌入这段脚本：

 

var fnTimeCountDown = function(d, o){ var f = {  zero: function(n){   var n = parseInt(n, 10);   if(n > 0){    if(n <= 9){     n = "0" + n;     }    return String(n);   }else{    return "00";    }  },  dv: function(){   d = d || Date.UTC(2050, 0, 1); //如果未定义时间，则我们设定倒计时日期是2012年12月12日   var future = new Date(d), now = new Date();   //现在将来秒差值   var dur = Math.round((future.getTime() - now.getTime()) / 1000) + future.getTimezoneOffset() * 60, pms = {    sec: "00",    mini: "00",    hour: "00",    day: "00",    month: "00",    year: "0"   };   if(dur > 0){    pms.sec = f.zero(dur % 60);    pms.mini = Math.floor((dur / 60)) > 0? f.zero(Math.floor((dur / 60)) % 60) : "00";    pms.hour = Math.floor((dur / 3600)) > 0? f.zero(Math.floor((dur / 3600)) % 24) : "00";    pms.day = Math.floor((dur / 86400)) > 0? f.zero(Math.floor((dur / 86400)) % 30) : "00";    //月份，以实际平均每月秒数计算    pms.month = Math.floor((dur / 2629744)) > 0? f.zero(Math.floor((dur / 2629744)) % 12) : "00";    //年份，按按回归年365天5时48分46秒算    pms.year = Math.floor((dur / 31556926)) > 0? Math.floor((dur / 31556926)) : "0";   }   return pms;  },  ui: function(){   if(o.sec){    o.sec.innerHTML = f.dv().sec;   }   if(o.mini){    o.mini.innerHTML = f.dv().mini;   }   if(o.hour){    o.hour.innerHTML = f.dv().hour;   }   if(o.day){    o.day.innerHTML = f.dv().day;   }   if(o.month){    o.month.innerHTML = f.dv().month;   }   if(o.year){    o.year.innerHTML = f.dv().year;   }   setTimeout(f.ui, 1000);  } };  f.ui();};

 

然后，调用方法fnTimeCountDown(参数1, 参数2)即可，于是就可以实现倒计时效果了，很简单吧。

下面是重点了，就是关于这里的参数。参数1指的是截止的时间。我个人建议使用UTC()方法创建Date对象传递给Date构造函数。例如，Date.UTC(2030, 6, 27, 16, 34)，表示的就是2030年7月27日161时34分0秒（月份需要加1），然后将这个参数替换“参数1”就可以了。具体来说就是：

 

var d = Date.UTC(2030, 6, 27, 16, 34);fnTimeCountDown(d, 参数2)

关于参数2，有点小复杂。参数2是个对象，同时也是个对象集，是显示秒、分、时数值标签的DOM对象集合，里面的对象名是固定的，不可自己定义，否则没有效果的。考虑到扩展性，对象名从秒一直到年，具体如下：

{     sec: 显示秒数值的标签对象,     mini: 显示分钟数值的标签对象,     hour: 显示小时数值的标签对象,     day: 显示天数数值的标签对象,     month: 显示月份数值的标签对象,     year: 显示年数数值的标签对象}

以上所有的参数都是可选的，如果哪个参数没有，则不显示时间变化，如果参数对应的DOM对象不存在，自然也没有数值变化的。举个例子吧，有三个标签，分别用来显示剩余的小时数，分钟数以及秒数的，其id分别是hour,mini,sec，如下所示：

<span id="hour"></span>时 <span id="mini"></span>分 <span id="sec"></span>秒

 则第二个参数应该这么写：

var obj = {     sec: document.getElementById("sec"),     mini: document.getElementById("mini"),     hour: document.getElementById("hour")}

所以两个参数合起来就是：

 

var d = Date.UTC(2030, 6, 27, 16, 34);var obj = {     sec: document.getElementById("sec"),     mini: document.getElementById("mini"),     hour: document.getElementById("hour")}fnTimeCountDown(d, obj);

来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]