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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
限制只能输入数字的实现代码
May 16 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
Javascript动画效果(4)
Oct 11 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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新手谈谈我的学习心得
2007/02/25 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python中List的sort方法指南
2014/09/01 Python
Python的动态重新封装的教程
2015/04/11 Python
Python如何实现文本转语音
2016/08/08 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python 画出来六维图
2019/07/26 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
2014年派出所工作总结
2014/11/21 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书