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 相关文章推荐
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP6新特性分析
2016/03/03 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python多进程编程技术实例分析
2014/09/16 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python调用百度语音REST API
2018/08/30 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
中国文明网签名寄语
2014/01/18 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
节约粮食标语
2014/06/18 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
计算机教师工作总结
2015/08/13 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript