js實現(xiàn)網(wǎng)頁同時進行多個倒計時功能

更新時間：2019年02月25日 10:42:23 作者：qingqian2

這篇文章主要為大家詳細介紹了js實現(xiàn)網(wǎng)頁同時進行多個倒計時功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)網(wǎng)頁同時進行多個倒計時的具體代碼，供大家參考，具體內(nèi)容如下

創(chuàng)建一個時間類Timer.

每個商品的倒計時生成一個實例：var time = new Timer();

/**
*startime 應該是毫秒數(shù)
*/
 
var Alarm = function (startime, endtime, countFunc, endFunc) {
    this.time = Math.floor((endtime - startime) / 1000); //時間
    this.countFunc = countFunc; //計時函數(shù)
    this.endFunc = endFunc; //結束函數(shù)
    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);
      //倒計時執(zhí)行函數(shù)
      self.countFunc(second, minute, hour, day);
      self.time--;
    }
  }, 1000);
}

如果調(diào)用：

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

調(diào)用示例：

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();

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: