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 相关文章推荐
深入认识javascript中的eval函数
Nov 02 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
微信小程序入门教程
Nov 18 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
js函数和this用法实例分析
Mar 13 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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操作XML作为数据库的类
2010/12/19 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
浅析vue深复制
2018/01/29 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Python中最大递归深度值的探讨
2019/03/05 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
python 如何上传包到pypi
2020/12/24 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
Java面试题汇总
2015/12/06 面试题
自荐信怎么写呢?
2013/12/09 职场文书
合作协议书
2014/04/23 职场文书
2015年药房工作总结
2015/04/25 职场文书
初中数学教学随笔
2015/08/15 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP