欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前

程序员文章站 2023-12-09 21:37:51
效果图: 代码如下:

效果图:

js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前

代码如下:

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
   <ul>
   <li class="one-comment">
     <a class="c-user-photo" href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" img/user_photo.png" alt="" /></a>
     <div class="comment-info">
      <h3 class="userinfo clearfix"><a href="" class=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name">大黄蜂</a><span class="fl-right tags"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="f-reply">回复</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="f-support">点赞</a></span></h3>
      <p class="time">2017-04-25 09:26:02</p>
      <p class="content">的确很漂亮啊,拍照技术越来越好了</p>
     </div>
    </li>
<li class="one-comment">
     <a class="c-user-photo" href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" img/user_photo.png" alt="" /></a>
     <div class="comment-info">
      <h3 class="userinfo clearfix"><a href="" class=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name">大黄蜂</a><span class="fl-right tags"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="f-reply">回复</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="f-support">点赞</a></span></h3>
      <p class="time">2017-04-22 09:26:02</p>
      <p class="content">的确很漂亮啊,拍照技术越来越好了</p>
     </div>
    </li>
 </li>
<li class="one-comment">
     <a class="c-user-photo" href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" img/user_photo.png" alt="" /></a>
     <div class="comment-info">
      <h3 class="userinfo clearfix"><a href="" class=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name">大黄蜂</a><span class="fl-right tags"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="f-reply">回复</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="f-support">点赞</a></span></h3>
      <p class="time">2017-04-26 17:50:02</p>
      <p class="content">的确很漂亮啊,拍照技术越来越好了</p>
     </div>
    </li>
 </li>
<li class="one-comment">
     <a class="c-user-photo" href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" img/user_photo.png" alt="" /></a>
     <div class="comment-info">
      <h3 class="userinfo clearfix"><a href="" class=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name">大黄蜂</a><span class="fl-right tags"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="f-reply">回复</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="f-support">点赞</a></span></h3>
      <p class="time">2017-04-26 09:26:02</p>
      <p class="content">的确很漂亮啊,拍照技术越来越好了</p>
     </div>
    </li>
   </ul>

  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
   //开发中我们需要计算一条动态的发布时间,一般我们得到的是一条日期字符串,我们需要计算当前时间和动态的发布时间,计算它们的差值来判断发布在什么时候
    //date.parse() 解析一个日期时间字符串,并返回1970/1/1 午夜距离该日期时间的毫秒数
    //var ndays = math.abs(parseint((time2 - time1)/1000/3600/24));
    // 获取当前时间戳(以s为单位)
   function settime(time,timeselector){
   var currenttime = date.parse(new date());
   var datetime = time;//后台传递来的时间
   var ts = timeselector;//选择器
   var d_day = date.parse(new date(datetime));
   var day = math.abs(parseint((d_day - currenttime)/1000/3600/24));//计算日期
   var hour = math.abs(parseint((d_day - currenttime)/1000/3600));//计算小时
   var minutes = math.abs(parseint((d_day - currenttime)/1000/60));//计算分钟
   var seconds = math.abs(parseint((d_day - currenttime)/1000));//计算秒
   console.log(day);
   if(day >= 2){
    ts.text(parseint(day)+"天前").tostring();
   }else if(day > 0 && day < 2){
    ts.text("昨天").tostring();
   }else if(hour > 0 && hour < 24){
    ts.text(parseint(hour)+"小时前").tostring();
   }else if(minutes > 0 && minutes < 60){
    ts.text(parseint(minutes)+"分钟前").tostring();
   }else if(seconds > 0 && seconds < 60){
    ts.text(parseint(seconds)+"秒前").tostring();
   }
  }
   //列表里面调用方法,传递两个参数 数据库时间和选择器
  $(".one-comment").each(function(){
   var t_time = $(this).find(".time").text();
   var timeselector = $(this).find(".time");
   settime(t_time,timeselector);
  })

  </script>
 </body>
</html>


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!