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


Posted in Javascript onApril 27, 2017

效果图:

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>

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

Javascript 相关文章推荐
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
JavaScript 继承使用分析
May 12 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
AngularJS Module方法详解
Dec 08 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
ES6关于Promise的用法详解
May 07 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
js获取浏览器的各种属性
Apr 27 #Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
详解axios在node.js中的post使用
Apr 27 #Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 #jQuery
js绑定事件和解绑事件
Apr 27 #Javascript
详解ECMAScript6入门--Class对象
Apr 27 #Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 #Javascript
You might like
织梦模板标记简介
2007/03/11 PHP
PHP $_SERVER详解
2009/01/16 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
JQuery中serialize()用法实例分析
2015/02/06 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
python中查看变量内存地址的方法
2015/05/05 Python
Python类的动态修改的实例方法
2017/03/24 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Python datetime模块使用方法小结
2020/06/18 Python
公司清洁工岗位职责
2013/12/14 职场文书
经济管理专业自荐信
2013/12/30 职场文书
2014年清明节寄语
2014/04/03 职场文书
商务英语专业求职信
2014/06/26 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
实施意见格式范本
2015/06/05 职场文书
退货证明模板
2015/06/23 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
JUnit5常用注解的使用
2021/07/02 Java/Android
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技