美文网首页
js,jquery多个倒计时同步使用backtimeout

js,jquery多个倒计时同步使用backtimeout

作者: xiaoaiai | 来源:发表于2017-08-04 14:40 被阅读0次
<! DOCTYPE html>
< html >
    < head >
       < meta charset= "UTF-8" >
       < title ></title >
       < script src= "js/jquery-1.11.0.js" type ="text/javascript" charset = "utf-8"></ script >
       < style type= "text/css" >
            table { width: 500 px; margin : 100 px auto ;}
            table tr { height: 30 px; }
            table tr td{ padding-left : 15 px ;}
        </ style>
       < script type= "text/javascript" >
            $( function(){
                var tb = document .getElementById( "backtimeout" );
                var tbrow = tb.rows.length;
                var time;

                function GetRTime( time , i){
                   var EndTime= new Date(time);
                   var NowTime = new Date();
                   var t = EndTime.getTime() - NowTime.getTime();
                   var d =Math.floor(t /1000/ 60/60/ 24 );
                   var h =Math.floor(t /1000/ 60/ 60 %24 );
                   var m =Math.floor(t /1000/ 60% 60 );
                   var s =Math.floor(t / 1000% 60 );

                   if (d< 10 ){
                      $( "#backtimeout tr").eq(i).find( ".time-d" ).html("0" + d + "天" );
                  } else {
                      $( "#backtimeout tr").eq(i).find( ".time-d" ).html(d + "天" );
                  }
                   if (h< 10 ){
                      $( "#backtimeout tr").eq(i).find( ".time-h" ).html("0" + h + "时" );
                  } else {
                      $( "#backtimeout tr").eq(i).find( ".time-h" ).html(h + "时" );
                  }
                   if (m< 10 ){
                      $( "#backtimeout tr").eq(i).find( ".time-m" ).html("0" + m + "分" );
                  } else {
                      $( "#backtimeout tr").eq(i).find( ".time-m" ).html(m + "分" );
                  }
                   if (s< 10 ){
                      $( "#backtimeout tr").eq(i).find( ".time-s" ).html("0" + s + "秒" );
                  } else {
                      $( "#backtimeout tr").eq(i).find( ".time-s" ).html(s + "秒" );
                  }

               };

                function backtime(){
                   for ( var i = 0;i < tbrow;i++ ){
                      time = $("#backtimeout tr").eq(i).find( ".backtime" ).html();
                      GetRTime(time,i);
                  };
               };
                  setInterval(backtime, 0 );

           })
       </ script >
    </ head >
    < body >
       < table border= "" cellspacing= "0" cellpadding = "0" id = "backtimeout" >
           < tr >
               < td >new projact</ td>
               < td >
                  < span class ="backtime" >2016/06/22 13:00:00</ span >
               </ td >
               < td >
                  < span class= "time-d" >00天</span >
                  < span class= "time-h" >00时</span >
                  < span class= "time-m" >00分</span >
                  < span class= "time-s" >00秒</span >
               </ td >
           </ tr >
           < tr >
               < td >new projact</ td>
               < td >
                  < span class ="backtime" >2016/07/20 16:00:10</ span >
               </ td >
               < td >
                  < span class= "time-d" >00天</span >
                  < span class= "time-h" >00时</span >
                  < span class= "time-m" >00分</span >
                  < span class= "time-s" >00秒</span >
               </ td >
           </ tr >
           < tr >
               < td >new projact</ td>
               < td >
                  < span class ="backtime" >2016/08/20 15:20:50</ span >
               </ td >
               < td >
                  < span class= "time-d" >00天</span >
                  < span class= "time-h" >00时</span >
                  < span class= "time-m" >00分</span >
                  < span class= "time-s" >00秒</span >
               </ td >
           </ tr >
           < tr >
               < td >new projact</ td>
               < td >
                  < span class ="backtime" >2016/05/30 18:00:20</ span >
               </ td >
               < td >
                  < span class= "time-d" >00天</span >
                  < span class= "time-h" >00时</span >
                  < span class= "time-m" >00分</span >
                  < span class= "time-s" >00秒</span >
               </ td >
           </ tr >
           < tr >
               < td >new projact</ td>
               < td >
                  < span class ="backtime" >2016/06/05 08:00:16</ span >
               </ td >
               < td >
                  < span class= "time-d" >00天</span >
                  < span class= "time-h" >00时</span >
                  < span class= "time-m" >00分</span >
                  < span class= "time-s" >00秒</span >
               </ td >
           </ tr >
       </ table >

    </ body >
</ html >

相关文章

网友评论

      本文标题:js,jquery多个倒计时同步使用backtimeout

      本文链接:https://www.haomeiwen.com/subject/itgvlxtx.html