zoukankan      html  css  js  c++  java
  • 活动倒计时代码(精确到毫秒)jquery插件

      1 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
      2 <script type="text/javascript">
      3     $.extend($.fn,{
      4        
      5         fnTimeCountDown:function(d){
      6             this.each(function(){
      7                 var $this = $(this);
      8                 var o = {
      9                     hm: $this.find(".hm"),
     10                     sec: $this.find(".sec"),
     11                     mini: $this.find(".mini"),
     12                     hour: $this.find(".hour"),
     13                     day: $this.find(".day"),
     14                     month:$this.find(".month"),
     15                     year: $this.find(".year")
     16                 };
     17                 var f = {
     18                     haomiao: function(n){
     19                         if(n < 10)return "00" + n.toString();
     20                         if(n < 100)return "0" + n.toString();
     21                         return n.toString();
     22                     },
     23                     zero: function(n){
     24                         var _n = parseInt(n, 10);//解析字符串,返回整数
     25                         if(_n > 0){
     26                             if(_n <= 9){
     27                                 _n = "0" + _n
     28                             }
     29                             return String(_n);
     30                         }else{
     31                             return "00";
     32                         }
     33                     },
     34                     dv: function(){
     35                         //d = d || Date.UTC(2050, 0, 1); //如果未定义时间,则我们设定倒计时日期是2050年1月1日
     36                         var _d = $this.data("end") || d;
     37                         var now = new Date(),
     38                             endDate = new Date(_d);
     39                         //现在将来秒差值
     40                         //alert(future.getTimezoneOffset());
     41                         var dur = (endDate - now.getTime()) / 1000 , mss = endDate - now.getTime() ,pms = {
     42                             hm:"000",
     43                             sec: "00",
     44                             mini: "00",
     45                             hour: "00",
     46                             day: "00",
     47                             month: "00",
     48                             year: "0"
     49                         };
     50                         if(mss > 0){
     51                             pms.hm = f.haomiao(mss % 1000);
     52                             pms.sec = f.zero(dur % 60);
     53                             pms.mini = Math.floor((dur / 60)) > 0? f.zero(Math.floor((dur / 60)) % 60) : "00";
     54                             pms.hour = Math.floor((dur / 3600)) > 0? f.zero(Math.floor((dur / 3600)) % 24) : "00";
     55                             pms.day = Math.floor((dur / 86400)) > 0? f.zero(Math.floor((dur / 86400)) % 30) : "00";
     56                             //月份,以实际平均每月秒数计算
     57                             pms.month = Math.floor((dur / 2629744)) > 0? f.zero(Math.floor((dur / 2629744)) % 12) : "00";
     58                             //年份,按按回归年365天5时48分46秒算
     59                             pms.year = Math.floor((dur / 31556926)) > 0? Math.floor((dur / 31556926)) : "0";
     60                         }else{
     61                             pms.year=pms.month=pms.day=pms.hour=pms.mini=pms.sec="00";
     62                             pms.hm = "000";
     63                             //alert('结束了');
     64                             return;
     65                         }
     66                         return pms;
     67                     },
     68                     ui: function(){
     69                         if(o.hm){
     70                             o.hm.html(f.dv().hm);
     71                         }
     72                         if(o.sec){
     73                             o.sec.html(f.dv().sec);
     74                         }
     75                         if(o.mini){
     76                             o.mini.html(f.dv().mini);
     77                         }
     78                         if(o.hour){
     79                             o.hour.html(f.dv().hour);
     80                         }
     81                         if(o.day){
     82                             o.day.html(f.dv().day);
     83                         }
     84                         if(o.month){
     85                             o.month.html(f.dv().month);
     86                         }
     87                         if(o.year){
     88                             o.year.html(f.dv().year);
     89                         }
     90                         setTimeout(f.ui, 1);
     91                     }
     92                 };
     93                 f.ui();
     94             });
     95         }
     96     });
     97 </script>
     98 
     99 <div style="background:rgb(183,17,41);  WIDTH: 100%;  color:#fff;FONT-FAMILY: arial; TEXT-ALIGN: center;">
    100     <P style="font-size:.8em;line-height:2em;">距活动结束还有:</P>
    101     <div id="fnTimeCountDown" data-end="2018/07/08 18:45:13">
    102         <span class="year">00</span>年
    103         <span class="month">00</span>月
    104         <span class="day">00</span>天
    105         <span class="hour">00</span>时
    106         <span class="mini">00</span>分
    107         <span class="sec">00</span>秒
    108         <span class="hm">000</span>
    109     </div>
    110 </div>
    111 <script type="text/javascript">
    112     $("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");
    113 </script>
     
    活动倒计时代码可以精确到毫秒已经使用jquery插件化,方便调用和同一个页面重复调用。插件调用代码: $("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");
     
    活动倒计时代码可以精确到毫秒已经使用jquery插件化,方便调用和同一个页面重复调用。
    html结构如:
    <div id="fnTimeCountDown">
            <span class="year">00</span>年
            <span class="month">00</span>月
            <span class="day">00</span>天
            <span class="hour">00</span>时
            <span class="mini">00</span>分
            <span class="sec">00</span>秒
            <span class="hm">000</span>
        </div>
    插件调用代码: $("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");

    如果一个页面同时调用多个倒计时也很简单,比如相同地方有一个相同类名:fnTimeCountDown 我们就可以使用这个类名调用即可$(".fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");

    在扩展一下,你想给每一个倒计时设置不同的倒计时时间,这个也可以,很简单在要显示倒计时时间的标签上写上 data-end="2018/07/08 18:45:13" 而且这个优先级是比较高的。所以你可以不传日期,直接使用data-end="2018/07/08 18:45:13" 这种方式设定日期。
    如:<div class="fnTimeCountDown" data-end="2018/07/08 18:45:13">......</div>
    这样子。
  • 相关阅读:
    ASP.NET Session
    表格导入和导出
    C#根据当前时间获取其他时间
    SuperGridControl全局设置
    无框窗体移动
    窗体在屏幕边缘隐藏
    comboBoxEx
    CROSS JOIN
    supergirdcontrol单元格添加控件
    ADVtree
  • 原文地址:https://www.cnblogs.com/boundless-sky/p/6756076.html
Copyright © 2011-2022 走看看