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 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
JS解析XML的实现代码
Nov 12 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
微信小程序实现刷脸登录
May 25 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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 写文本日志实现代码
2010/05/18 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
提高php编程效率技巧
2015/08/13 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
用Python编写简单的定时器的方法
2015/05/02 Python
python发送邮件功能实现代码
2016/07/15 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
Pycharm安装python库的方法
2020/11/24 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
海洋科学专业求职信
2014/08/10 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
党员检讨书范文
2014/12/27 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
2015年人事科工作总结
2015/04/28 职场文书
论文评审意见
2015/06/05 职场文书
在职证明书模板
2015/06/15 职场文书
战友聚会致辞
2015/07/28 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python