html一页面多个倒计时,js实现网页同时进行多个倒计时功能

本文实例为大家分享了js实现网页同时进行多个倒计时的具体代码，供大家参考，具体内容如下

创建一个时间类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();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。