溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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">
<h4 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></h4>
<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">
<h4 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></h4>
<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">
<h4 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></h4>
<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">
<h4 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></h4>
<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>以上是“js如何模仿微信朋友圈計算時間顯示幾天/幾小時/幾分鐘/幾秒之前的效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
