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网页版计算器的简单实现
Jul 02 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
JavaScript中return false的用法
Mar 12 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 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
基于文本的留言簿
2006/10/09 PHP
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
php读取3389的脚本
2014/05/06 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
phpfpm的作用和用法
2019/10/10 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python 第一步 hello world
2009/09/25 Python
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
创业计划书之物流运送
2019/09/17 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js