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 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 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
一个简洁的多级别论坛
2006/10/09 PHP
MYSQL环境变量设置方法
2007/01/15 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
vue更改数组中的值实例代码详解
2020/02/07 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
Python中生成Epoch的方法
2017/04/26 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
12月小学生校园广播稿
2014/02/04 职场文书
上班打牌检讨书
2014/02/07 职场文书
家长对孩子的感言
2014/03/10 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
行风评议整改报告
2014/11/06 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
工商局调档介绍信
2015/10/22 职场文书