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 面向对象继承
Nov 26 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
详解Vue中CSS样式穿透问题
Sep 12 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
PHP超级全局变量数组小结
2012/10/04 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
用console.table()调试javascript
2014/09/04 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
教育科学研究生自荐信
2013/10/09 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
创优争先心得体会
2014/09/11 职场文书
借款协议书
2014/09/16 职场文书
2015年清明节活动总结
2015/02/09 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
土建施工员岗位职责
2015/04/11 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
婚礼答谢词范文
2015/09/29 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript
分享3个非常实用的 Python 模块
2022/03/03 Python