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遮罩层实例讲解
May 11 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jquery图片预览插件实现方法详解
Jul 18 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与javascript对多项选择的处理
2006/10/09 PHP
如何使用PHP中的字符串函数
2006/10/09 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
基于php split()函数的用法详解
2013/06/05 PHP
初识PHP
2014/09/28 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
不错的JS中变量相关的细节分析
2007/08/13 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
浅谈js中的bind
2019/03/18 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Python如何输出整数
2020/06/07 Python
简述 Python 的类和对象
2020/08/21 Python
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
材料加工硕士生求职信
2013/10/10 职场文书
高校毕业生自我鉴定
2013/10/27 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书