如何实现一个网页多个倒计时？
想要做一个每一个商品都有一个独立的倒计时的页面，类似于电商网站的限时抢购。商品的倒计时开始结束时间都是在后台接口中返回，存在在一个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页面上？搞不懂要如何可以将每个商品的时间输入到倒计时的代码中，然后还能独立运行。
口胡、纯属口胡
9 years, 11 months ago
Answers
创建一个时间类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();
zjzjbao
answered 9 years, 11 months ago