首页 > 开发 > JS > 正文

js实现网页同时进行多个倒计时功能

2024-05-06 16:48:26
字体:
来源:转载
供稿:网友

本文实例为大家分享了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();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表