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


Posted in Javascript onFebruary 25, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 #Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 #Javascript
写一个Vue Popup组件
Feb 25 #Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 #Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 #Javascript
JavaScript中的事件与异常捕获详析
Feb 24 #Javascript
Vue 组件注册实例详解
Feb 23 #Javascript
You might like
dedecms模版制作使用方法
2007/04/03 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
使用Python实现批量ping操作方法
2020/05/06 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
车间主管岗位职责
2013/11/14 职场文书
房地产开发计划书
2014/01/10 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
员工团队活动方案
2014/08/28 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
小学母亲节活动总结
2015/02/10 职场文书
闪闪的红星观后感
2015/06/08 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis