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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
JS中的三个循环小结
Jun 20 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 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
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
javascript 闭包详解
2015/02/15 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
Python算法应用实战之队列详解
2017/02/04 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
村安全生产责任书
2014/08/25 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
实习生个人总结范文
2015/02/28 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
用JS创建一个录屏功能
2021/11/11 Javascript
PHP正则表达式之RCEService回溯
2022/04/11 PHP
选购到合适的激光打印机
2022/04/21 数码科技