js实现网页同时进行多个倒计时功能
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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();
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：JS实现求5的阶乘示例
下一篇：js实现一个页面多个倒计时的3种方法