javascript - 如何实现一个网页多个倒计时？

Question

想要做一个每一个商品都有一个独立的倒计时的页面，类似于电商网站的限时抢购。商品的倒计时开始结束时间都是在后台接口中返回，存在在一个JSON数组中，然后通过Angularjs的ng-repeat循环输出到HTML页面中。
JSON格式如下:

[{'id':'001'
'ImgUrl':'img.jpg'
'startTime' : '2015 06 30 17:03:40'
'endTime': '2015 06 30 17:03:50'},
{'id':'002'
'ImgUrl':'img.jpg'
'startTime' : '2015 06 30 17:02:40'
'endTime': '2015 06 30 17:03:50'},
{'id':'003'
'ImgUrl':'img.jpg'
'startTime' : '2015 06 30 17:01:40'
'endTime': '2015 06 30 17:03:50'}]

在网上找了很多js倒计时代码但都只能同一页面使用一次的。请问该如何将这些倒计时显示到HTML页面上？搞不懂要如何可以将每个商品的时间输入到倒计时的代码中，然后还能独立运行。

Answer 1

创建一个时间类Timer.

每个商品的倒计时生成一个实例：var time = new Timer();

---

/**
*startime 应该是毫秒数
*
*/

var Alarm = function (startime, endtime, countFunc, endFunc) {
        this.time = Math.floor((endtime - startime) / 1000); //时间
        this.countFunc = countFunc; //计时函数
        this.endFunc = endFunc; //结束函数
        this.flag = 't' + Date.parse(new Date()); //
    };
Alarm.prototype.start = function () {
    var self = this;

    self.flag = setInterval(function () {
        if (self.time < 0) {
            clearInterval(self.flag);
            self.endFunc();
            console.log('计时结束');
        } else {

            var minute, hour, day, second;
            day = Math.floor(self.time / 60 / 60 / 24) < 10 ? '0' + Math.floor(self.time / 60 / 60 / 24) : Math.floor(self.time / 60 / 60 / 24);
            hour = Math.floor(self.time / 60 / 60 % 24) < 10 ? '0' + Math.floor(self.time / 60 / 60 % 24) : Math.floor(self.time / 60 / 60 % 24);
            minute = Math.floor(self.time / 60 % 60) < 10 ? '0' + Math.floor(self.time / 60 % 60) : Math.floor(self.time / 60 % 60);
            second = Math.floor(self.time % 60) < 10 ? '0' + Math.floor(self.time % 60) : Math.floor(self.time % 60);
            //倒计时执行函数
            self.countFunc(second, minute, hour, day);
            self.time--;

        }
    }, 1000);
}

如果调用：

var time1 = new Alarm(startime, endtime, countFunc, endFunc);
time1.start();

var time2 = new Alarm(startime, endtime, countFunc, endFunc);
time2.start();
...

---

调用示例：

var countTime = function () {
    var eles = $('.count_time'),
        len = eles.length;
    for (; len > 0; len--) {
        var ele = eles.eq(len - 1);
        (function (ele) {
            startTime = new Date(ele.attr('data-start-time')).getTime(),
                    endTime = new Date(ele.attr('data-end-time')).getTime(),
                    alarm = new Alarm(startTime, endTime, function (second, minute, hour, day) { //计时钟
                        ele.text(hour + ':' + minute + ':' + second);
                    }, function () { //倒计时结束
                        ele.text('00:00:00');
                        window.location.reload();
                    });
            alarm.start();
        })(ele);
    }
};
countTime();

Answer 2

https://github.com/siddii/angular-timer