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 不能释放内存.
Sep 07 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
jQuery 使用手册(三)
Sep 23 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 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面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python3.3实现乘法表示例
2014/02/07 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
python scatter函数用法实例详解
2020/02/11 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
一年级班主任工作总结2014
2014/11/08 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers
python 使用pandas读取csv文件的方法
2022/12/24 Python