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 Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jquery简易手风琴插件的封装
Oct 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模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
node网页分段渲染详解
2016/09/05 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python常用的json标准库
2019/02/19 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
python如何删除文件中重复的字段
2019/07/16 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python和go语言的区别是什么
2020/07/20 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
学期自我鉴定
2013/11/04 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
师德师风的心得体会
2014/09/02 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
毕业典礼致辞
2015/07/29 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python