js如何實(shí)現(xiàn)網(wǎng)頁同時(shí)進(jìn)行多個(gè)倒計(jì)時(shí)功能

這篇文章將為大家詳細(xì)講解有關(guān)js如何實(shí)現(xiàn)網(wǎng)頁同時(shí)進(jìn)行多個(gè)倒計(jì)時(shí)功能，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

js的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

js實(shí)現(xiàn)網(wǎng)頁同時(shí)進(jìn)行多個(gè)倒計(jì)時(shí)的具體內(nèi)容如下

創(chuàng)建一個(gè)時(shí)間類Timer.

每個(gè)商品的倒計(jì)時(shí)生成一個(gè)實(shí)例：var time = new Timer();

/**
*startime 應(yīng)該是毫秒數(shù)
*/
 
var Alarm = function (startime, endtime, countFunc, endFunc) {
    this.time = Math.floor((endtime - startime) / 1000); //時(shí)間
    this.countFunc = countFunc; //計(jì)時(shí)函數(shù)
    this.endFunc = endFunc; //結(jié)束函數(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('計(jì)時(shí)結(jié)束');
    } 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);
      //倒計(jì)時(shí)執(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) { //計(jì)時(shí)鐘
            ele.text(hour + ':' + minute + ':' + second);
          }, function () { //倒計(jì)時(shí)結(jié)束
            ele.text('00:00:00');
            window.location.reload();
          });
      alarm.start();
    })(ele);
  }
};
countTime();

關(guān)于“js如何實(shí)現(xiàn)網(wǎng)頁同時(shí)進(jìn)行多個(gè)倒計(jì)時(shí)功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。