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]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
vue实现打地鼠小游戏
Aug 21 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python3 log10()函数简单用法
2019/02/19 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
如何提高JDBC的性能
2013/04/30 面试题
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
捐款感谢信
2015/01/20 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL