js模仿微信朋友圈計算時間顯示幾天/幾小時/幾分鐘/幾秒之前
更新時間:2017年04月27日 10:23:52 作者:小精豆2016
本篇文章主要介紹了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">的確很漂亮啊,拍照技術(shù)越來越好了</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">的確很漂亮啊,拍照技術(shù)越來越好了</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">的確很漂亮啊,拍照技術(shù)越來越好了</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">的確很漂亮啊,拍照技術(shù)越來越好了</p> </div> </li> </ul> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //開發(fā)中我們需要計算一條動態(tài)的發(fā)布時間,一般我們得到的是一條日期字符串,我們需要計算當前時間和動態(tài)的發(fā)布時間,計算它們的差值來判斷發(fā)布在什么時候 //Date.parse() 解析一個日期時間字符串,并返回1970/1/1 午夜距離該日期時間的毫秒數(shù) //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(); } } //列表里面調(diào)用方法,傳遞兩個參數(shù) 數(shù)據(jù)庫時間和選擇器 $(".one-comment").each(function(){ var t_time = $(this).find(".time").text(); var timeSelector = $(this).find(".time"); setTime(t_time,timeSelector); }) </script> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
淺談addEventListener和attachEvent的區(qū)別
下面小編就為大家?guī)硪黄獪\談addEventListener和attachEvent的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07使用layui日期控件laydate對開始和結(jié)束時間進行聯(lián)動控制的方法
今天小編就為大家分享一篇使用layui日期控件laydate對開始和結(jié)束時間進行聯(lián)動控制的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript實現(xiàn)body內(nèi)任意節(jié)點的自定義屬性功能示例
這篇文章主要介紹了JavaScript實現(xiàn)body內(nèi)任意節(jié)點的自定義屬性功能,涉及javascript針對DOM節(jié)點的獲取及屬性設置相關(guān)操作技巧,需要的朋友可以參考下2017-09-09JavaScript實現(xiàn)簡單的雙色球(實例講解)
下面小編就為大家?guī)硪黄狫avaScript實現(xiàn)簡單的雙色球(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07