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 替换
Feb 19 Javascript
JS版网站风格切换实例代码
Oct 06 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 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
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Python实现数字的格式化输出
2020/08/01 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
个人应聘自我评价分享
2013/11/18 职场文书
安全生产汇报材料
2014/02/17 职场文书
高中生职业规划范文
2014/03/09 职场文书
学习雷锋活动总结
2014/04/29 职场文书
住宅使用说明书
2014/05/09 职场文书
三八节标语
2014/06/27 职场文书
专家推荐信怎么写
2015/03/25 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android