Jquery倒计时

最新推荐文章于 2023-02-27 08:54:02 发布
最新推荐文章于 2023-02-27 08:54:02 发布
阅读量330 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Only_YouMyLove/article/details/47106745
版权
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="xxhd1.aspx.cs" Inherits="Web.xxhd1" %>

<%@ Register Src="PetWebHead.ascx" TagName="PetWebHead" TagPrefix="uc1" %>
<%@ Register Src="PetWebFoot.ascx" TagName="PetWebFoot" TagPrefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>宠物芯片 | 宠主互联 中国首个宠物找寻、救援、社交服务平台，最可靠的宠物身份注册中心！</title>
    <link href="css/Defalut_Style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .wycj
        {
            width: 20px;
            height: 20px;
            float: left;
            cursor: pointer;
        }
        /******************************代码不兼容IE8***********/.rp_hd
        {
            width: 920px;
            height: 189px;
            float: left;
            margin-left: 11px;
            background-color: #ffffff;
        }
        .yt
        {
            width: 116px;
            height: 116px;
            float: left;
        }
        .s_time
        {
            font-size: 14px;
            color: Green;
        }
        .end_time
        {
            font-size: 14px;
            color: Red;
        }
        .dayuan
        {
            /*********************************背景圆的css 样式***************/
            width: 116px;
            height: 116px;
            background-color: #00abeb; /**************大圆的颜色********************/
            border-radius: 50%; /****************圆角样式 不支持 IE8***************/
            position: relative;
        }
        .xiaoyuan /***中心遮罩层****************/
        {
            width: 100px;
            height: 100px;
            background-color: #ffffff;
            border-radius: 50%; /****************圆角样式 不支持 IE8***************/
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 5;
            text-align: center;
            line-height: 100px;
             font-size:40px;
             font-weight:bold;
             color:#ef9500;
        }
        .zuobianman /*****************左半面遮罩***********************/
        {
            width: 116px;
            height: 116px;
            background-color: #eeeeee;
            border-radius: 50%;
            clip: rect(0px,58px,auto,0px);
            position: absolute;
            top: 0px;
            right: 0px;
            z-index: 3;
        }
        .youbanmian /****************右拌面遮罩*************************/
        {
            width: 116px;
            height: 116px;
            background-color: #eeeeee;
            border-radius: 50%;
            clip: rect(0px,auto,auto,58px);
            position: absolute;
            top: 0px;
            right: 0px;
            z-index: 4; /************
           transform:rotate(30deg);
           **************/
        }
        .sjc
        {
            display: none;
        }
        .bili
        {
            color: #00abeb;
            font-size: 40px;
            font-weight: bold;
        }
        .endtime_div
        {
            width: 460px;
             height: 30px;
              float: left;
        }
        .time_m
        {
        }
        .time_d
        {
        }
        .time_h
        {
        }
        .time_m
        {
        }
        .time_s
        {
        }
        </style>

    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(function(){
       
    
          $(".sjc").each(function(){
           var x= $(this).next(".s_time").html();
          
           var x2=$(this).next().next(".end_time").text();
     
               /*************************倒计时*************************/
       
        
         var myendtime_div=$(this).parent().parent().parent().next().next().children(".endtime_div");
         time_cha();
         function time_cha()
           {
          //********当前时间*********
         var time_start=new Date().getTime();
//   
          //********结束时间*********
//         var etime=$(this).parent().prev().prev().children().find(".end_time").text();
         var dtArr =  x2.split("-");
         var time_end = new Date(dtArr[0]+"/"+dtArr[1]+"/"+dtArr[2]).getTime();
          // 计算时间差
         var time_distance = time_end - time_start;
          // 天
         var int_day = Math.floor(time_distance/86400000)
         time_distance -= int_day * 86400000;
         // 时
         var int_hour = Math.floor(time_distance/3600000)
         time_distance -= int_hour * 3600000;
         // 分
         var int_minute = Math.floor(time_distance/60000)
         time_distance -= int_minute * 60000;
         // 秒
         var int_second = Math.floor(time_distance/1000)
         // 时分秒为单数时、前面加零
        if(int_day < 10){
         int_day = "0" + int_day;
         }
        if(int_hour < 10){
        int_hour = "0" + int_hour;
         }
        if(int_minute < 10){
        int_minute = "0" + int_minute;
         }
        if(int_second < 10){
        int_second = "0" + int_second;
         }
    // 显示时间
    myendtime_div.children(".time_d").text(int_day);
    myendtime_div.children(".time_h").text(int_hour);
    myendtime_div.children(".time_m").text(int_minute);
    myendtime_div.children(".time_s").text(int_second);
    // 设置定时器
          setTimeout(time_cha,1000);
          
           }
 
             /*************************倒计时结束*************************/
     
     
     
        
          
           /***************************************************获得活动共多少天*******************************/
           function day_cha(end_dt,st_dt)
           {
                var dtArr = end_dt.split("-");
                var dt = Date.parse(dtArr[0]+"/"+dtArr[1]+"/"+dtArr[2]);
                var dtArr2 = st_dt.split("-");
                var dt2 = new Date(dtArr2[0]+"/"+dtArr2[1]+"/"+dtArr2[2]);
                var cha=((dt-dt2)/86400000);
              
               //var cha=((Date.parse(OneMonth+"/"+OneDay+"/"+OneYear)- Date.parse(TwoMonth+"/"+TwoDay+"/"+TwoYear))/86400000);
              
               return Math.abs(cha);
            }

            /*************************************获得活动已经进行了多少天***********************************/
            function to_now_cha(st_dt)
            {
                
                var dtArr2 = st_dt.split("-");
                var dt2 = new Date(dtArr2[0]+"/"+dtArr2[1]+"/"+dtArr2[2]);
                var dtnow= new Date();
//                var y_0=dtnow.getFullYear();
//                var m_0=dtnow.getMonth();
//                var d_0=dtnow.getDay();
//                var dn=new Date(y_0+"/"+m_0+"/"+d_0);
                
                var cha2=((dtnow-dt2)/86400000);
            
                return Math.abs(cha2);
                
            }
            var jt=to_now_cha(x);//开始时间距离今天的天数
          
            var st=day_cha(x2,x);//活动的总天数
            
            // 算法描述：
              /********************************
               如果 当前天数 小于 总天数的一半  那么 左边不动 右边旋转相应度数；
               如果当前天数 大于总天数的一半  用总天数的一半 减去 当前天数 右边消失  左边 旋转相应度数；
              
              ****************************/
              
              /*****************************************转动角度的函数****************************/
              function zdds(ygts,zts)
              {
                  //ygts   表示已经进行的天数；
                   
                  //zts 表示总天数；
                  var zs=0;
                  if(zts>ygts*2)
                  {
                     zts=zts/2;
                     zs= parseInt((ygts/zts)*100);
                     
                  }else
                  {
                    ygts= ygts-zts/2;
                    zts=zts/2;
                    zs=parseInt((ygts/zts)*100);
                  }
                 
                  return zs;
              }
              
              /****************************************开始写转动**************/
             
            
             var  vd=zdds(jt,st);
             
             var pstn=parseInt((jt/st)*100);
             
//          $(this).prev().children().find(".xiaoyuan").text(pstn+"%");
          $(this).parent().parent().parent().prev().prev().children().find(".xiaoyuan").text(pstn+"%");
          
          //判断活动是否已经过期的函数
          function ck_guoqi(jssj)
          {
              var ck=true;
             var dn_0=new Date();//获得当前时间；
              var dtArr2 = jssj.split("-");
              var dt2 = new Date(dtArr2[0]+"/"+dtArr2[1]+"/"+dtArr2[2]);
              if(dn_0>dt2)
              {
              ck=false;
              }
              return ck;
          }
          if(ck_guoqi(x2))
          {
              if(st>jt*2)
              {
                 //右边转动
                 
                 //$(this).prev().children(".youbanmian").css('transform', "rotate(" + vd*3.6 + "deg)");
//                $(this).prev().children().find(".youbanmian").css('transform', "rotate(" + vd*1.8 + "deg)");
                 $(this).parent().parent().parent().prev().prev().children().find(".youbanmian").css('transform', "rotate(" + vd*1.8 + "deg)");
                   
              
              }else
              {
//              $(this).prev().children().find(".zuobianman").css('transform', "rotate(" + vd*1.8 + "deg)");
                  
                     $(this).parent().parent().parent().prev().prev().children().find(".zuobianman").css('transform', "rotate(" + vd*1.8 + "deg)");
                 // $(this).prev().children().find(".youbanmian").css("display","none");
//                  $(this).prev().children().find(".youbanmian").css("background-color","#00abeb");
                        $(this).parent().parent().parent().prev().prev().children().find(".youbanmian").css("background-color","#00abeb");

              }
           }else // 已过期
           {
              $(this).parent().parent().parent().prev().prev().children().find(".xiaoyuan").text("已过期");
           }
              /************************转动结束*************************/
           $(this).html(st);
           
 
          });
      
        
      });
      
        
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="gohead">
        <uc1:PetWebHead ID="PetWebHead1" runat="server" />
    </div>
    <div style="clear: both;">
    </div>
    <div id="wn" style="height: 300px;">
        <div style="width: 100%; height: 25px;">
        </div>
        <div style="width: 1000px; margin-left: 100px; height: auto; background-color: #eeeeee;">
            <%--这个是页面 模板 所有内容全写在这里--%>
            <%--促销活动、领养活动、芯片活动 --%>
            <div style="width: 1000px; height: 293px; float: left;">
                <div style="width: 1000px; height: 55px; float: left;">
                </div>
                <div style="width: 35px; height: 240px; float: left;">
                </div>
                <div style="width: 260px; height: 200px; float: left; background-image: url(images/xxhd/cxhd1.png);">
                    <div style="float: right; width: 260px; height: 55px;">
                    </div>
                    <div style="float: right; width: 80px; height: 55px; font-size: 50px; font-weight: bold;
                        color: White;">
                        5</div>
                </div>
                <div style="width: 75px; height: 200px; float: left;">
                </div>
                <div style="width: 260px; height: 200px; float: left; background-image: url(images/xxhd/lyhd1.png);">
                    <div style="float: right; width: 260px; height: 55px;">
                    </div>
                    <div style="float: right; width: 80px; height: 55px; font-size: 50px; font-weight: bold;
                        color: White;">
                        15</div>
                </div>
                <div style="width: 75px; height: 200px; float: left;">
                </div>
                <div style="width: 260px; height: 200px; float: left; background-image: url(images/xxhd/xphd1.png);">
                    <div style="float: right; width: 260px; height: 55px;">
                    </div>
                    <div style="float: right; width: 80px; height: 55px; font-size: 50px; font-weight: bold;
                        color: White;">
                        20</div>
                </div>
            </div>
            <%--线下活动--%>
            <%--线下活动标题--%>
            <div style="width: 1000px; height: 1380px; float: left; border: solid 1px #eeeeee;
                background-color: #ffffff;">
                <div style="width: 1000px; height: 100px; float: left; border-bottom: solid 1px #eeeeee;">
                    <div style="width: 1000px; height: 32px; float: left;">
                    </div>
                    <div style="width: 35px; height: 68px; float: left;">
                    </div>
                    <span style="float: left; font-size: 30px; color: #333333; font-family: 微软雅黑">线下活动(Offline
                        Promotions)</span>
                </div>
                <%--线下活动明细--%>
                <div style="width: 1000px; height: 1280px; float: left;">
                    <div style="width: 1000px; height: 30px; float: left;">
                    </div>
                    <div style="width: 36px; height: 1120px; float: left;">
                    </div>
                    <%--  明细_1--%>
                    <div style="width: 931px; height: 189px; float: left; background-color: #ea5520;">
                        <div class="rp_hd">
                            <div style="width: 920px; height: 10px; float: left;">
                            </div>
                            <div style="width: 39px; height: 139px; float: left;">
                            </div>
                            <div class="yt">
                                <div class="dayuan">
                                    <div class="zuobianman">
                                    </div>
                                    <div class="youbanmian">
                                    </div>
                                    <div class="xiaoyuan">
                                        <span class="bili"></span>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 30px; height: 129px; float: left;">
                            </div>
                            <div style="width: 542px; height: 129px; float: left; color: #333333;">
                                <div style="font-weight: bold; width: 542px; font-size: 18px; height: 23px; float: left;">
                                    北京宠物免费体检第一弹</div>
                                <div style="width: 542px; height: 20px; float: left;">
                                </div>
                                <div style="width: 542px; height: 86px; font-size: 18px; float: left;">
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        活动地点：北京市关忠动物医院（全市七家）</div>
                                    <div style="width: 542px; height: 13px; float: left; font-size: 14px;">
                                    </div>
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        内容说明：您的爱宠多久没体检了？有什么潜在疾病您知道吗？为了让您...<span style="color: #55c7f2;">详情</span></div>
                                    <div style="width: 542px; height: 13px; float: left; font-size: 14px;">
                                    </div>
                                    <!--放圆形进度条-->
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        <span class="sjc"></span>有限期限： <span class="s_time">2015-07-01</span><!--开始时间-->-
                                        <span class="end_time">2015-9-29</span><!--结束时间时间--></div>
                                </div>
                            </div>
                            <div style="width: 189px; height: 129px; float: left;">
                                <div style="width: 189px; height: 47px; float: left;">
                                </div>
                                <div style="width: 22px; height: 82px; float: left;">
                                </div>
                                <div style="width: 60px; height: 56px; float: left;">
                                    <img src="images/xxhd/Checking_attendance.png" /></div>
                                <div style="width: 22px; height: 82px; float: left;">
                                </div>
                                <div style="width: 85px; height: 20px; float: left;">
                                </div>
                                <div style="width: 85px; height: 20px; float: left;">
                                    101</div>
                            </div>
                            <div style="width: 920px; height: 40px; background-color: #eeeeee; float: left;">
                                <div style="width: 920px; height: 10px; float: left;">
                                </div>
                                <div style="width: 12px; height: 30px; float: left;">
                                </div>
                                <div style="width: 20px; height: 20px; float: left;">
                                    <img src="images/xxhd/Exclamation_mark_red.png" /></div>
                                <div style="width: 10px; height: 30px; float: left;">
                                </div>
                                <div class="endtime_div">
                                    据活动结束还有：<span class="time_d" ></span><span>天</span><span class="time_h"></span><span>时</span><span class="time_m" ></span><span>分</span><span class="time_s" ></span><span>秒</span></div>
                                <div style="width: 227px; height: 30px; float: left;">
                                    <div style="width: 67px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 20px; height: 30px; float: left;">
                                    </div>
                                    <div class="wycj">
                                        <img src="images/xxhd/Play_button.png" />
                                    </div>
                                    <div style="width: 10px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 110px; height: 30px; float: left;">
                                        我要参加</div>
                                </div>
                                <div style="width: 189px; height: 30px; float: left;">
                                    <div style="width: 62px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 20px; height: 20px; float: left;">
                                        <img src="images/xxhd/Favorite.png" /></div>
                                    <div style="width: 10px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 97px; height: 30px; float: left;">
                                        收藏</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 964px; height: 30px; float: left;">
                    </div>
                    <%--  明细_2--%>
                     <div style="width: 931px; height: 189px; float: left; background-color: #ea5520;">
                        <div class="rp_hd">
                            <div style="width: 920px; height: 10px; float: left;">
                            </div>
                            <div style="width: 39px; height: 139px; float: left;">
                            </div>
                            <div class="yt">
                                <div class="dayuan">
                                    <div class="zuobianman">
                                    </div>
                                    <div class="youbanmian">
                                    </div>
                                    <div class="xiaoyuan">
                                        <span class="bili"></span>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 30px; height: 129px; float: left;">
                            </div>
                            <div style="width: 542px; height: 129px; float: left; color: #333333;">
                                <div style="font-weight: bold; width: 542px; font-size: 18px; height: 23px; float: left;">
                                    北京宠物免费体检第一弹</div>
                                <div style="width: 542px; height: 20px; float: left;">
                                </div>
                                <div style="width: 542px; height: 86px; font-size: 18px; float: left;">
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        活动地点：北京市关忠动物医院（全市七家）</div>
                                    <div style="width: 542px; height: 13px; float: left; font-size: 14px;">
                                    </div>
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        内容说明：您的爱宠多久没体检了？有什么潜在疾病您知道吗？为了让您...<span style="color: #55c7f2;">详情</span></div>
                                    <div style="width: 542px; height: 13px; float: left; font-size: 14px;">
                                    </div>
                                    <!--放圆形进度条-->
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        <span class="sjc"></span>有限期限： <span class="s_time">2015-07-01</span><!--开始时间-->-
                                        <span class="end_time">2015-7-29</span><!--结束时间时间--></div>
                                </div>
                            </div>
                            <div style="width: 189px; height: 129px; float: left;">
                                <div style="width: 189px; height: 47px; float: left;">
                                </div>
                                <div style="width: 22px; height: 82px; float: left;">
                                </div>
                                <div style="width: 60px; height: 56px; float: left;">
                                    <img src="images/xxhd/Checking_attendance.png" /></div>
                                <div style="width: 22px; height: 82px; float: left;">
                                </div>
                                <div style="width: 85px; height: 20px; float: left;">
                                </div>
                                <div style="width: 85px; height: 20px; float: left;">
                                    101</div>
                            </div>
                            <div style="width: 920px; height: 40px; background-color: #eeeeee; float: left;">
                                <div style="width: 920px; height: 10px; float: left;">
                                </div>
                                <div style="width: 12px; height: 30px; float: left;">
                                </div>
                                <div style="width: 20px; height: 20px; float: left;">
                                    <img src="images/xxhd/Exclamation_mark_red.png" /></div>
                                <div style="width: 10px; height: 30px; float: left;">
                                </div>
                                <div class="endtime_div">
                                    据活动结束还有：<span class="time_d" ></span><span>天</span><span class="time_h"></span><span>时</span><span class="time_m" ></span><span>分</span><span class="time_s" ></span><span>秒</span></div>
                                <div style="width: 227px; height: 30px; float: left;">
                                    <div style="width: 67px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 20px; height: 30px; float: left;">
                                    </div>
                                    <div class="wycj">
                                        <img src="images/xxhd/Play_button.png" />
                                    </div>
                                    <div style="width: 10px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 110px; height: 30px; float: left;">
                                        我要参加</div>
                                </div>
                                <div style="width: 189px; height: 30px; float: left;">
                                    <div style="width: 62px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 20px; height: 20px; float: left;">
                                        <img src="images/xxhd/Favorite.png" /></div>
                                    <div style="width: 10px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 97px; height: 30px; float: left;">
                                        收藏</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 964px; height: 30px; float: left;">
                    </div>
                    <%--  明细_3--%>
                    <div style="width: 931px; height: 189px; float: left; background-color: #ea5520;">
                        <div class="rp_hd">
                            <div style="width: 920px; height: 10px; float: left;">
                            </div>
                            <div style="width: 39px; height: 139px; float: left;">
                            </div>
                            <div class="yt">
                                <div class="dayuan">
                                    <div class="zuobianman">
                                    </div>
                                    <div class="youbanmian">
                                    </div>
                                    <div class="xiaoyuan">
                                        <span class="bili"></span>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 30px; height: 129px; float: left;">
                            </div>
                            <div style="width: 542px; height: 129px; float: left; color: #333333;">
                                <div style="font-weight: bold; width: 542px; font-size: 18px; height: 23px; float: left;">
                                    北京宠物免费体检第一弹</div>
                                <div style="width: 542px; height: 20px; float: left;">
                                </div>
                                <div style="width: 542px; height: 86px; font-size: 18px; float: left;">
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        活动地点：北京市关忠动物医院（全市七家）</div>
                                    <div style="width: 542px; height: 13px; float: left; font-size: 14px;">
                                    </div>
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        内容说明：您的爱宠多久没体检了？有什么潜在疾病您知道吗？为了让您...<span style="color: #55c7f2;">详情</span></div>
                                    <div style="width: 542px; height: 13px; float: left; font-size: 14px;">
                                    </div>
                                    <!--放圆形进度条-->
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        <span class="sjc"></span>有限期限： <span class="s_time">2015-07-01</span><!--开始时间-->-
                                        <span class="end_time">2015-7-29</span><!--结束时间时间--></div>
                                </div>
                            </div>
                            <div style="width: 189px; height: 129px; float: left;">
                                <div style="width: 189px; height: 47px; float: left;">
                                </div>
                                <div style="width: 22px; height: 82px; float: left;">
                                </div>
                                <div style="width: 60px; height: 56px; float: left;">
                                    <img src="images/xxhd/Checking_attendance.png" /></div>
                                <div style="width: 22px; height: 82px; float: left;">
                                </div>
                                <div style="width: 85px; height: 20px; float: left;">
                                </div>
                                <div style="width: 85px; height: 20px; float: left;">
                                    101</div>
                            </div>
                            <div style="width: 920px; height: 40px; background-color: #eeeeee; float: left;">
                                <div style="width: 920px; height: 10px; float: left;">
                                </div>
                                <div style="width: 12px; height: 30px; float: left;">
                                </div>
                                <div style="width: 20px; height: 20px; float: left;">
                                    <img src="images/xxhd/Exclamation_mark_red.png" /></div>
                                <div style="width: 10px; height: 30px; float: left;">
                                </div>
                                <div class="endtime_div">
                                    据活动结束还有：<span class="time_d" ></span><span>天</span><span class="time_h"></span><span>时</span><span class="time_m" ></span><span>分</span><span class="time_s" ></span><span>秒</span></div>
                                <div style="width: 227px; height: 30px; float: left;">
                                    <div style="width: 67px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 20px; height: 30px; float: left;">
                                    </div>
                                    <div class="wycj">
                                        <img src="images/xxhd/Play_button.png" />
                                    </div>
                                    <div style="width: 10px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 110px; height: 30px; float: left;">
                                        我要参加</div>
                                </div>
                                <div style="width: 189px; height: 30px; float: left;">
                                    <div style="width: 62px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 20px; height: 20px; float: left;">
                                        <img src="images/xxhd/Favorite.png" /></div>
                                    <div style="width: 10px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 97px; height: 30px; float: left;">
                                        收藏</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 964px; height: 30px; float: left;">
                    </div>
                    <%--  明细_4--%>
                    <div style="width: 931px; height: 189px; float: left; background-color: #ea5520;">
                        <div class="rp_hd">
                            <div style="width: 920px; height: 10px; float: left;">
                            </div>
                            <div style="width: 39px; height: 139px; float: left;">
                            </div>
                            <div class="yt">
                                <div class="dayuan">
                                    <div class="zuobianman">
                                    </div>
                                    <div class="youbanmian">
                                    </div>
                                    <div class="xiaoyuan">
                                        <span class="bili"></span>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 30px; height: 129px; float: left;">
                            </div>
                            <div style="width: 542px; height: 129px; float: left; color: #333333;">
                                <div style="font-weight: bold; width: 542px; font-size: 18px; height: 23px; float: left;">
                                    北京宠物免费体检第一弹</div>
                                <div style="width: 542px; height: 20px; float: left;">
                                </div>
                                <div style="width: 542px; height: 86px; font-size: 18px; float: left;">
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        活动地点：北京市关忠动物医院（全市七家）</div>
                                    <div style="width: 542px; height: 13px; float: left; font-size: 14px;">
                                    </div>
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        内容说明：您的爱宠多久没体检了？有什么潜在疾病您知道吗？为了让您...<span style="color: #55c7f2;">详情</span></div>
                                    <div style="width: 542px; height: 13px; float: left; font-size: 14px;">
                                    </div>
                                    <!--放圆形进度条-->
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        <span class="sjc"></span>有限期限： <span class="s_time">2015-07-01</span><!--开始时间-->-
                                        <span class="end_time">2015-7-29</span><!--结束时间时间--></div>
                                </div>
                            </div>
                            <div style="width: 189px; height: 129px; float: left;">
                                <div style="width: 189px; height: 47px; float: left;">
                                </div>
                                <div style="width: 22px; height: 82px; float: left;">
                                </div>
                                <div style="width: 60px; height: 56px; float: left;">
                                    <img src="images/xxhd/Checking_attendance.png" /></div>
                                <div style="width: 22px; height: 82px; float: left;">
                                </div>
                                <div style="width: 85px; height: 20px; float: left;">
                                </div>
                                <div style="width: 85px; height: 20px; float: left;">
                                    101</div>
                            </div>
                            <div style="width: 920px; height: 40px; background-color: #eeeeee; float: left;">
                                <div style="width: 920px; height: 10px; float: left;">
                                </div>
                                <div style="width: 12px; height: 30px; float: left;">
                                </div>
                                <div style="width: 20px; height: 20px; float: left;">
                                    <img src="images/xxhd/Exclamation_mark_red.png" /></div>
                                <div style="width: 10px; height: 30px; float: left;">
                                </div>
                                <div class="endtime_div">
                                    据活动结束还有：<span class="time_d" ></span><span>天</span><span class="time_h"></span><span>时</span><span class="time_m" ></span><span>分</span><span class="time_s" ></span><span>秒</span></div>
                                <div style="width: 227px; height: 30px; float: left;">
                                    <div style="width: 67px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 20px; height: 30px; float: left;">
                                    </div>
                                    <div class="wycj">
                                        <img src="images/xxhd/Play_button.png" />
                                    </div>
                                    <div style="width: 10px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 110px; height: 30px; float: left;">
                                        我要参加</div>
                                </div>
                                <div style="width: 189px; height: 30px; float: left;">
                                    <div style="width: 62px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 20px; height: 20px; float: left;">
                                        <img src="images/xxhd/Favorite.png" /></div>
                                    <div style="width: 10px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 97px; height: 30px; float: left;">
                                        收藏</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 964px; height: 30px; float: left;">
                    </div>
                    <%--  明细_5--%>
                    <div style="width: 931px; height: 189px; float: left; background-color: #ea5520;">
                        <div class="rp_hd">
                            <div style="width: 920px; height: 10px; float: left;">
                            </div>
                            <div style="width: 39px; height: 139px; float: left;">
                            </div>
                            <div class="yt">
                                <div class="dayuan">
                                    <div class="zuobianman">
                                    </div>
                                    <div class="youbanmian">
                                    </div>
                                    <div class="xiaoyuan">
                                        <span class="bili"></span>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 30px; height: 129px; float: left;">
                            </div>
                            <div style="width: 542px; height: 129px; float: left; color: #333333;">
                                <div style="font-weight: bold; width: 542px; font-size: 18px; height: 23px; float: left;">
                                    北京宠物免费体检第一弹</div>
                                <div style="width: 542px; height: 20px; float: left;">
                                </div>
                                <div style="width: 542px; height: 86px; font-size: 18px; float: left;">
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        活动地点：北京市关忠动物医院（全市七家）</div>
                                    <div style="width: 542px; height: 13px; float: left; font-size: 14px;">
                                    </div>
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        内容说明：您的爱宠多久没体检了？有什么潜在疾病您知道吗？为了让您...<span style="color: #55c7f2;">详情</span></div>
                                    <div style="width: 542px; height: 13px; float: left; font-size: 14px;">
                                    </div>
                                    <!--放圆形进度条-->
                                    <div style="width: 542px; height: 20px; float: left; font-size: 14px;">
                                        <span class="sjc"></span>有限期限： <span class="s_time">2015-07-01</span><!--开始时间-->-
                                        <span class="end_time">2015-7-29</span><!--结束时间时间--></div>
                                </div>
                            </div>
                            <div style="width: 189px; height: 129px; float: left;">
                                <div style="width: 189px; height: 47px; float: left;">
                                </div>
                                <div style="width: 22px; height: 82px; float: left;">
                                </div>
                                <div style="width: 60px; height: 56px; float: left;">
                                    <img src="images/xxhd/Checking_attendance.png" /></div>
                                <div style="width: 22px; height: 82px; float: left;">
                                </div>
                                <div style="width: 85px; height: 20px; float: left;">
                                </div>
                                <div style="width: 85px; height: 20px; float: left;">
                                    101</div>
                            </div>
                            <div style="width: 920px; height: 40px; background-color: #eeeeee; float: left;">
                                <div style="width: 920px; height: 10px; float: left;">
                                </div>
                                <div style="width: 12px; height: 30px; float: left;">
                                </div>
                                <div style="width: 20px; height: 20px; float: left;">
                                    <img src="images/xxhd/Exclamation_mark_red.png" /></div>
                                <div style="width: 10px; height: 30px; float: left;">
                                </div>
                                <div class="endtime_div">
                                    据活动结束还有：<span class="time_d" ></span><span>天</span><span class="time_h"></span><span>时</span><span class="time_m" ></span><span>分</span><span class="time_s" ></span><span>秒</span></div>
                                <div style="width: 227px; height: 30px; float: left;">
                                    <div style="width: 67px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 20px; height: 30px; float: left;">
                                    </div>
                                    <div class="wycj">
                                        <img src="images/xxhd/Play_button.png" />
                                    </div>
                                    <div style="width: 10px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 110px; height: 30px; float: left;">
                                        我要参加</div>
                                </div>
                                <div style="width: 189px; height: 30px; float: left;">
                                    <div style="width: 62px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 20px; height: 20px; float: left;">
                                        <img src="images/xxhd/Favorite.png" /></div>
                                    <div style="width: 10px; height: 30px; float: left;">
                                    </div>
                                    <div style="width: 97px; height: 30px; float: left;">
                                        收藏</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 964px; height: 30px; float: left;">
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 100%; height: 25px;">
        </div>
    </div>
    <div class="goend">
        <uc2:PetWebFoot ID="PetWebFoot1" runat="server" />
    </div>
    </form>
</body>
</html>

-东南枝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery倒计时精确到秒
CiCiCi12的博客
05-28 760
效果图： 从左到右依次为天数，小时数，分钟数，秒数。 只支持100天(不含)以内进行倒计时。 var endDate = "2020-06-30 00:00:00"; var endTime = new Date(endDate).getTime(); var date = endTime - new Date().getTime(); var days = date / 1000 / 60 / 60 / 24; var daysRound = Math.floor(days); var hou
JQuery倒计时插件
04-17
JQuery倒计时插件，效果请看http://www.jq22.com/jquery-info3132
新闻发布网页-1
liheao的博客
05-29 1229
后台自动生成 using System; using System.Collections.Generic; using System.Lin
常见前端面试题整理——HTML、CSS篇
weixin_34249678的博客
08-10 271
前言 2019届校招陆陆续续开始了，整理了一些高频的面试题。 HTML部分 1. 什么是&lt;!DOCTYPE&gt;？ DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档。 文档解析类型有： BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。（如果没有声明DOCTYPE，默认就是这个模式） CSS1Co...
Js控制弹窗实现在任意分辨率下居中显示
u011425213的专栏
10-11 654
弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示，为了解决此问题，本文测试了一下案例在此与大家分享，有类似需求的朋友可以学习下   贴代码 复制代码 代码如下:         弹出窗口_www.jb51.net          $(document).ready(function (){  $("#btn_center").click(function
jquery倒计时插件
qq_40683441的博客
08-30 909
结构 &lt;div class="count-down" data-end="2097/11/10"&gt;   &lt;p&gt;90年后倒计时&lt;/p&gt;   &lt;span class="day"&gt;0&lt;/span&gt; 天 &lt;span class="hour"&gt;0&lt;/spa
jquery倒计时
qq_32087995的博客
05-31 174
公式 秒 = 明日凌晨时间-当前时间，例如 秒数 =2021/6/3 00:00:00 — 2021/6/1 12:25:16
简易Jquery倒计时插件
Irving_Ma的博客
03-12 791
引入jquery、leftTime.min.js、leftTime.css； 添加html: <td class="colspan-a"> <span id="dataInfoShow_1"></span> <div class="data-show-box" id="dateShow1"> &lt...
jQuery倒计时
chenzhao635的专栏
05-19 92
1.类型1 本文以团购网站的倒计时为背景，我们知道，网站会给每个优惠活动(商品)定一个结束时间，也就是到期时间，但系统时间到达了结束时间，就意味着活动结束。因此，我们在HTML中就要定义活动的结束时间。 HTML <ulclass="prolist"> <li><imgsrc="images/p1.jpg...
Jquery实现倒计时
Hello_mengkebao的博客
08-11 2294
Jquery实现倒计时 <script type="text/javascript"> //时间倒计时 var lastHour = 0; //小时 var lastMinute = 29; //分钟 var lastSecond = 59; //秒 var lastInterval = setInterval(function () { if (lastSecond > 0) { la
jquery插件jquery倒计时插件分享
12-12
代码如下:$(document).ready(function () { /* 延迟函数 */ jQuery.fn.delay = function (time, func) { return this.each(function () { setTimeout(func, time); }); }; jQuery.fn.countDown = function ...
jquery 倒计时效果实现秒杀思路
12-09
代码如下: [removed] $(function(){ countDown(“2015/9/8 11:11:59″,”#colockbox1”); }); function countDown(time,id){ var day_elem = $(id).find(‘.day’); var hour_elem = $(id).find(‘.hour’);...
jQuery倒计时插件FlipTimer特效代码
03-20
jQuery倒计时插件FlipTimer是一款类似日历翻页效果的jQuery网站上线倒计时代码下载。
jQuery实现倒计时效果
岁月如歌去，十年弹指间
02-27 1507
【代码】jQuery实现倒计时效果。
课程设计基于python+mediapipe+opencv开发的手势识别系统源码（含超详细注释）.zip
05-15
课程设计基于python+mediapipe+opencv开发的手势识别系统源码（含超详细注释）.zip个人经导师指导并认可通过的98分大作业设计项目，适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计，作为“参考资料”使用。 课程设计基于python+mediapipe+opencv开发的手势识别系统源码（含超详细注释）.zip个人经导师指导并认可通过的98分大作业设计项目，适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计，作为“参考资料”使用。 课程设计基于python+mediapipe+opencv开发的手势识别系统源码（含超详细注释）.zip个人经导师指导并认可通过的98分大作业设计项目，适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计，作为“参考资料”使用。 课程设计基于python+mediapipe+opencv开发的手势识别系统源码（含超详细注释）.zip个人经导师指导并认可通过的98分大作业设计项目，适用人群：计算机，电子信息工程、数学等专业的大学生课程设计。
yolov7 车牌检测 车牌识别 中文车牌识别 检测 支持双层车牌 支持12种中文车牌
最新发布
05-15
yolov7
基于MQTT的智能宠物投喂系统.zip
05-15
基于MQTT的智能宠物投喂系统：STM32、ESP8266、LCDST7789、压力传感器、按键中断修改定时投喂时间、云平台
jquery 倒计时
08-24
在 jQuery 中实现倒计时可以使用 `setInterval` 函数来定时更新显示的时间。下面是一个简单的示例： HTML： ```html <div id="countdown"></div> ``` JavaScript： ```javascript $(document).ready(function() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值