jQuery基于扩展实现的倒计时效果


Posted in Javascript onMay 14, 2016

本文实例讲述了jQuery基于扩展实现的倒计时效果。分享给大家供大家参考,具体如下:

<div id="fnTimeCountDown" data-end="">
<span class="mini">00</span>分
<span class="sec">00</span>秒
<span class="hm">000</span>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
 $.extend($.fn,{
  fnTimeCountDown:function(d){
   this.each(function(){
    var $this = $(this);
    var o = {
     hm: $this.find(".hm"),
     sec: $this.find(".sec"),
     mini: $this.find(".mini"),
     hour: $this.find(".hour"),
     day: $this.find(".day"),
     month:$this.find(".month"),
     year: $this.find(".year")
    };
    var f = {
     haomiao: function(n){
      if(n < 10)return "00" + n.toString();
      if(n < 100)return "0" + n.toString();
      return n.toString();
     },
     zero: function(n){
      var _n = parseInt(n, 10);//解析字符串,返回整数
      if(_n > 0){
       if(_n <= 9){
        _n = "0" + _n
       }
       return String(_n);
      }else{
       return "00";
      }
     },
     dv: function(){
      //d = d || Date.UTC(2050, 0, 1); //如果未定义时间,则我们设定倒计时日期是2050年1月1日
      var _d = $this.data("end") || d;
      var now = new Date(),
       endDate = new Date(_d);
      //现在将来秒差值
      //alert(future.getTimezoneOffset());
      var dur = (endDate - now.getTime()) / 1000 , mss = endDate - now.getTime() ,pms = {
       hm:"000",
       sec: "00",
       mini: "00",
       hour: "00",
       day: "00",
       month: "00",
       year: "0"
      };
      if(mss > 0){
       pms.hm = f.haomiao(mss % 1000);
       pms.sec = f.zero(dur % 60);
       pms.mini = Math.floor((dur / 60)) > 0? f.zero(Math.floor((dur / 60)) % 60) : "00";
       pms.hour = Math.floor((dur / 3600)) > 0? f.zero(Math.floor((dur / 3600)) % 24) : "00";
       pms.day = Math.floor((dur / 86400)) > 0? f.zero(Math.floor((dur / 86400)) % 30) : "00";
       //月份,以实际平均每月秒数计算
       pms.month = Math.floor((dur / 2629744)) > 0? f.zero(Math.floor((dur / 2629744)) % 12) : "00";
       //年份,按按回归年365天5时48分46秒算
       pms.year = Math.floor((dur / 31556926)) > 0? Math.floor((dur / 31556926)) : "0";
      }else{
       pms.year=pms.month=pms.day=pms.hour=pms.mini=pms.sec="00";
       pms.hm = "000";
       //alert('结束了');
       return;
      }
      return pms;
     },
     ui: function(){
      if(o.hm){
       o.hm.html(f.dv().hm);
      }
      if(o.sec){
       o.sec.html(f.dv().sec);
      }
      if(o.mini){
       o.mini.html(f.dv().mini);
      }
      if(o.hour){
       o.hour.html(f.dv().hour);
      }
      if(o.day){
       o.day.html(f.dv().day);
      }
      if(o.month){
       o.month.html(f.dv().month);
      }
      if(o.year){
       o.year.html(f.dv().year);
      }
      setTimeout(f.ui, 1);
     }
    };
    f.ui();
   });
  }
 });
</script>
<script type="text/javascript">
 $("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");
</script>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery jsonp 使用示例代码
Aug 12 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
Angularjs中UI Router的使用方法
May 14 #Javascript
两种js监听滚轮事件的实现方法
May 13 #Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 #Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 #Javascript
AngularJS在IE8的不支持的解决方法
May 13 #Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 #Javascript
JavaScript String 对象常用方法详解
May 13 #Javascript
You might like
深入php数据采集的详解
2013/06/02 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
一份婚庆公司创业计划书
2014/01/11 职场文书
国际会议邀请函范文
2014/01/16 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
行政主管岗位职责
2015/02/03 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
民间借贷借条范本
2015/05/25 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
美容院员工规章制度
2015/08/05 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
担保书范文
2019/07/09 职场文书
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL