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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
js实现图片推拉门效果代码实例
May 18 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
php5 mysql分页实例代码
2008/04/10 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
JavaScript访问样式表代码
2010/10/15 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python 绘图和可视化详细介绍
2017/02/11 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
Python 函数返回值的示例代码
2019/03/11 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python中return的返回和执行实例
2019/12/24 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
金融学专科生自我鉴定
2014/02/21 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书