JS/jquery实现一个网页内同时调用多个倒计时的方法


Posted in jQuery onApril 27, 2017

本文实例讲述了jquery/js实现一个网页内同时调用多个倒计时的方法。分享给大家供大家参考,具体如下:

最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦!

JS/jquery实现一个网页内同时调用多个倒计时的方法

var plugJs={
  stamp:0,
  tid:1,
  stampnow:'<?php echo NOW_TIME;?>',//统一开始时间戳
  intervalTime:function(){
    if(plugJs.stamp > 0){
      var day = Math.floor(plugJs.stamp / (60 * 60 * 24));
      var hour = Math.floor(plugJs.stamp / (60 * 60)) - (day * 24);
      var minute = Math.floor(plugJs.stamp / 60) - (day * 24 * 60) - (hour * 60);
      var second = Math.floor(plugJs.stamp) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
      if (day <= 9) day = '0' + day;
      if (hour <= 9) hour = '0' + hour;
      if (minute <= 9) minute = '0' + minute;
      if (second <= 9) second = '0' + second;
      jQuery('.t_h_'+plugJs.tid).html(hour);
      jQuery('.t_m_'+plugJs.tid).html(minute);
      jQuery('.t_s_'+plugJs.tid).html(second);
      plugJs.stamp--;
      setTimeout('if(typeof(plugJs.intervalTime) == "function"){plugJs.intervalTime();}',1000);
    }
  },
  timer:function (stampend,tid){
    plugJs.stamp = parseInt(stampend)-parseInt(plugJs.stampnow);//剩余时间戳
    setTimeout('if(typeof(plugJs.intervalTime) == "function"){plugJs.intervalTime();}',1000);
  }
};
jQuery(document).ready(function(){
  var stampend = parseInt(jQuery('.countdown_1').attr('data-time'));//灵活读取表里的结束时间戳
  plugJs.timer(stampend,'1');
});
<div class="time countdown_1" data-time="1449429731">
  <span class="t_h_1">00</span>
  <i class="lay_line">:</i>
  <span class="t_m_1">00</span>
  <i class="lay_line">:</i>
  <span class="t_s_1">00</span>
</div>
<div class="time countdown_2" data-time="1449456731">
  <span class="t_h_2">00</span>
  <i class="lay_line">:</i>
  <span class="t_m_2">00</span>
  <i class="lay_line">:</i>
  <span class="t_s_2">00</span>
</div>

注释:setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()

jQuery 相关文章推荐
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 #jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 #jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 #jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 #jQuery
jquery.form.js异步提交表单详解
Apr 25 #jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 #jQuery
You might like
php一些公用函数的集合
2008/03/27 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
js的一些常用方法小结
2011/06/29 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python读取和保存图片5种方法对比
2018/09/12 Python
Python实现最大子序和的方法示例
2019/07/05 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
高中体育教学反思
2014/01/24 职场文书
表彰大会主持词
2014/03/26 职场文书
租赁意向书范本
2014/04/01 职场文书
《开国大典》教学反思
2014/04/19 职场文书
小学生演讲稿大全
2014/04/25 职场文书
旅游文化节策划方案
2014/06/06 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
商务邀请函
2015/01/30 职场文书
实习班主任自我评价
2015/03/11 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis