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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 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 date函数常用时间处理方法
2015/05/11 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
完美的php分页类
2017/10/24 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
小程序实现留言板
2018/11/02 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python PO设计模式的具体使用
2019/08/16 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
this关键字的含义
2015/04/08 面试题
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
工程管理英文求职信
2014/03/18 职场文书
具结保证书范本
2015/05/11 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL