茶树

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Css--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
        .sjc
          {
         font-size: 12px; line-height: 20px;
          }
         .s_time
         {
          }
         .end_time
         {
          }
         .endtime_div
         {
          font-size: 12px; line-height: 20px;
         }
         .endtime_div_hide
         {
          font-size: 12px; line-height: 20px; display:none; color:Red;
          }
         .time_d
         {
          }
       .time_h
        {
        }
       .time_m
        {
         }
       .time_s
       {
        }

 jQuery---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- $(".sjc").each(function(){

        /*获得开始时间*/
           var x= $(this).children(".s_time").html();
             /*获得结束时间*/
           var x2=$(this).children(".end_time").text();
    
               /*************************倒计时*************************/
      
         //判断活动是否已经过期的函数
          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))
          {
        
         $(this).parent().next().next().children(".endtime_div_hide").hide();
         var myendtime_div=$(this).parent().next().next().children(".endtime_div").show();
        
         alert(myendtime_div.html());
         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);
           }
           }else{
          
           $(this).parent().next().next().children(".endtime_div_hide").show();
           $(this).parent().next().next().children(".endtime_div").hide();
          
           }
          
          
          
           });
div-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 <div style="width: 150px; height: 20px; float: left;">
  <span class="sjc">
  <span class="s_time">2015-11-20</span>
  至<span class="end_time">2015-12-9</span></span>
  </div>
  <div style="width: 40px; height: 20px; float: left; margin-left: 10px;">
    <img src="images/lmfwxqy/clock_grey.png" /></div>
  <div style="width: 160px; height: 20px; float: left;">
     <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 class="endtime_div_hide">
      活动已结束!
      </div>
      </div>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------作为小白编写的第一个js效果

posted on 2015-12-08 15:13  "茶树"  阅读(150)  评论(0编辑  收藏  举报