js模仿微信朋友圈計(jì)算時(shí)間顯示幾天/幾小時(shí)/幾分鐘/幾秒之前
更新時(shí)間：2017年04月27日 10:23:52 作者：小精豆2016
本篇文章主要介紹了js模仿微信朋友圈計(jì)算時(shí)間顯示幾天/幾小時(shí)/幾分鐘/幾秒之前的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
效果圖：
代碼如下：
<!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">回復(fù)</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">點(diǎn)贊</a></span></h3>
<p class="time">2017-04-25 09:26:02</p>
<p class="content">的確很漂亮啊，拍照技術(shù)越來(lái)越好了</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">回復(fù)</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">點(diǎn)贊</a></span></h3>
<p class="time">2017-04-22 09:26:02</p>
<p class="content">的確很漂亮啊，拍照技術(shù)越來(lái)越好了</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">回復(fù)</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">點(diǎn)贊</a></span></h3>
<p class="time">2017-04-26 17:50:02</p>
<p class="content">的確很漂亮啊，拍照技術(shù)越來(lái)越好了</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">回復(fù)</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">點(diǎn)贊</a></span></h3>
<p class="time">2017-04-26 09:26:02</p>
<p class="content">的確很漂亮啊，拍照技術(shù)越來(lái)越好了</p>
</div>
</li>
</ul>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//開(kāi)發(fā)中我們需要計(jì)算一條動(dòng)態(tài)的發(fā)布時(shí)間，一般我們得到的是一條日期字符串，我們需要計(jì)算當(dāng)前時(shí)間和動(dòng)態(tài)的發(fā)布時(shí)間，計(jì)算它們的差值來(lái)判斷發(fā)布在什么時(shí)候
//Date.parse() 解析一個(gè)日期時(shí)間字符串，并返回1970/1/1 午夜距離該日期時(shí)間的毫秒數(shù)
//var nDays = Math.abs(parseInt((time2 - time1)/1000/3600/24));
// 獲取當(dāng)前時(shí)間戳(以s為單位)
function setTime(time,timeSelector){
var currentTime = Date.parse(new Date());
var dateTime = time;//后臺(tái)傳遞來(lái)的時(shí)間
var ts = timeSelector;//選擇器
var d_day = Date.parse(new Date(dateTime));
var day = Math.abs(parseInt((d_day - currentTime)/1000/3600/24));//計(jì)算日期
var hour = Math.abs(parseInt((d_day - currentTime)/1000/3600));//計(jì)算小時(shí)
var minutes = Math.abs(parseInt((d_day - currentTime)/1000/60));//計(jì)算分鐘
var seconds = Math.abs(parseInt((d_day - currentTime)/1000));//計(jì)算秒
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)+"小時(shí)前").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)用方法，傳遞兩個(gè)參數(shù) 數(shù)據(jù)庫(kù)時(shí)間和選擇器
$(".one-comment").each(function(){
var t_time = $(this).find(".time").text();
var timeSelector = $(this).find(".time");
setTime(t_time,timeSelector);
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家!
您可能感興趣的文章:
- js獲取當(dāng)前時(shí)間顯示在頁(yè)面上并每秒刷新
- 純JS實(shí)現(xiàn)動(dòng)態(tài)時(shí)間顯示代碼
- js實(shí)現(xiàn)時(shí)間顯示幾天前、幾小時(shí)前或者幾分鐘前的方法集錦
- json格式的時(shí)間顯示為正常年月日的方法
- 純js實(shí)現(xiàn)動(dòng)態(tài)時(shí)間顯示
- Javascript 世界時(shí)區(qū)時(shí)間顯示代碼
- JS 時(shí)間顯示效果代碼
- javascript 時(shí)間顯示代碼集合(Date對(duì)象)
- Javascript六種風(fēng)格的時(shí)間顯示方式
- javascript實(shí)現(xiàn)智能手環(huán)時(shí)間顯示
相關(guān)文章
JavaScript中數(shù)組flat方法的使用與實(shí)現(xiàn)方法
在Array的顯示原型下有一個(gè)flat方法,可以將多維數(shù)組,降維,傳的參數(shù)是多少就降多少維,下面這篇文章主要給大家介紹了關(guān)于JavaScript中數(shù)組flat方法的使用與實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-08-08
拖動(dòng)Html元素集合 Drag and Drop any item
拖動(dòng)Html元素集合 Drag and Drop any item...2006-12-12
Select下拉框模糊查詢(xún)功能實(shí)現(xiàn)代碼
這篇文章主要介紹了Select下拉框模糊查詢(xún)功能實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
學(xué)習(xí)JavaScript中的閉包c(diǎn)losure應(yīng)該注意什么
這篇文章主要介紹了學(xué)習(xí)JavaScript中的閉包c(diǎn)losure應(yīng)該注意什么?在?JavaScript?中，?每當(dāng)創(chuàng)建一個(gè)函數(shù)，?閉包就會(huì)在函數(shù)創(chuàng)建的同時(shí)被創(chuàng)建出來(lái),但是學(xué)習(xí)的時(shí)候我們應(yīng)該注意哪些問(wèn)題呢，帶著疑問(wèn)一起進(jìn)入下面文章學(xué)習(xí)具體內(nèi)容吧2022-06-06
Javascript 調(diào)用 ActionScript 的簡(jiǎn)單方法
在Flex中，ActionScript調(diào)用Javascript是比較簡(jiǎn)單的，說(shuō)白了就是，在html里，怎么調(diào)用Javascript，在ActionScript就怎么調(diào)用就可以了。接下來(lái)通過(guò)本文給大家介紹js 調(diào)用 actionscript方法，感興趣的朋友一起看看吧2016-09-09
完美解決手機(jī)瀏覽器頂部下拉出現(xiàn)網(wǎng)頁(yè)源或刷新的問(wèn)題
下面小編就為大家分享一篇完美解決手機(jī)瀏覽器頂部下拉出現(xiàn)網(wǎng)頁(yè)源或刷新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
寫(xiě)了個(gè)XML+Tree無(wú)窮樹(shù)js版
寫(xiě)了個(gè)XML+Tree無(wú)窮樹(shù)js版...2007-09-09
很多前端只會(huì)謝謝頁(yè)面,一讓他們接觸js,就非常害怕,下面這篇文章主要給大家介紹了關(guān)于JS技巧之一行賦值語(yǔ)句能玩出多少花樣的相關(guān)資料,需要的朋友可以參考下2022-10-10
JavaScript使用localStorage判斷設(shè)置值是否過(guò)期
本文主要介紹了JavaScript使用localStorage判斷設(shè)置值是否過(guò)期，通過(guò)設(shè)置過(guò)期時(shí)間，我們可以使用 setItemWithExpiration 函數(shù)將數(shù)據(jù)存儲(chǔ)到 localStorage 中，并使用 getItemWithExpiration 函數(shù)獲取數(shù)據(jù)并檢查是否過(guò)期，感興趣的可以了解一下2023-05-05