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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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 文件上传类代码
2011/08/06 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
在vue中封装可复用的组件方法
2018/03/01 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
JavaScript实现滑动门效果
2020/01/18 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
python中的global关键字的使用方法
2019/08/20 Python
django删除表重建的实现方法
2019/08/28 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
财务会计大学生自我评价
2014/04/09 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
第一节英语课开场白
2015/06/01 职场文书
关于车尾的标语大全
2015/08/11 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
python运行脚本文件的三种方法实例
2022/06/25 Python