团购类网站倒计时的js实现

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

<script type="text/javascript" src="js/timeCountDown.js"></script>
然后，调用方法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对象不存在，自然也没有数值变化的。如果是上面部分展示的团购倒计时的话，只要下面三个子对象就足够了：

{
     sec: 显示秒数值的标签对象,
     mini: 显示分钟数值的标签对象,
     hour: 显示小时数值的标签对象
}

举个例子吧，有三个标签，分别用来显示剩余的小时数，分钟数以及秒数的，其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);

这段实例代码所产生的效果如下所示：
18时 41分 04秒


如果现在还没有到2030年，则您应该可以看到上面秒前面的数值在不停的倒计时。

需要注意的是，参数2的对象集不支持jQuery对象，只能是DOM对象，如果您需要支持jQuery对象，需要修改原js方法中的innerHTML为jQuery的html()或是text()方法。


<script type="text/javascript" src="../js/timeCountDown.js"></script>
<script type="text/javascript">
var zxx = {
$: function(id){
return document.getElementById(id);
},
futureDate: Date.UTC(2050, 6, 30, 12),
obj: function(){
return {
sec: zxx.$("sec"),
mini: zxx.$("mini"),
hour: zxx.$("hour"),
day: zxx.$("day"),
month: zxx.$("month"),
year: zxx.$("year")
}
}
};
fnTimeCountDown(zxx.futureDate, zxx.obj());
</script>



<div class="demo">
            <p class="pl20 b f14">测试需要，现假设倒计时时间为<span class="red">2050年7月30号中午12点整</span></p>
            <div class="tuan_img_x">
                <div class="time_x tc lh24 b">
                    <div id="year" class="year time_td">0</div>
                        <div id="month" class="month time_td">00</div>
                        <div id="day" class="day time_td">00</div>
                        <div id="hour" class="hour time_td">00</div>
                        <div id="mini" class="time_td mini ml5">00</div>
                        <div id="sec" class="sec time_td">00</div>
                    </div>
                </div>               
            </div>