timeago.js自动将时间戳转换为更易读的时间轴

最新推荐文章于 2024-08-08 08:32:08 发布

piperzero

最新推荐文章于 2024-08-08 08:32:08 发布

阅读量2.1k

点赞数

分类专栏：网站建设

本文链接：https://blog.csdn.net/freejs/article/details/8982680

版权

网站建设专栏收录该内容

740 篇文章 1 订阅

订阅专栏

timeago.js自动将时间戳转换为更易读的时间轴

http://www.corange.cn//uploadfiles/20130508_24414.jpg

演示地址: http://www.corange.cn/demo/3870/index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="时间轴，jquery" />
<title>timeago.js自动将时间戳转换为更易读的时间轴</title>
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.timeago.js"></script>
<script type="text/javascript">
$(function(){
prepareDynamicDates();
$(".timeago").timeago();
});
var zeropad = function (num) {
return ((num < 10) ? '0' : '') + num;
};
var iso8601 = function (date) {
return date.getUTCFullYear()
+ "-" + zeropad(date.getUTCMonth()+1)
+ "-" + zeropad(date.getUTCDate())
+ "T" + zeropad(date.getUTCHours())
+ ":" + zeropad(date.getUTCMinutes())
+ ":" + zeropad(date.getUTCSeconds()) + "Z";
};

function prepareDynamicDates() {
$('abbr.loaded').attr("title", iso8601(new Date()));
}

</script>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{margin:50px auto 0 auto; width:730px}
.list li{line-height:24px; font-size:14px}
.timeago{margin-left:10px; color:#999}
.desc{color:#666; line-height:42px; font-weight:bold}
</style>
</head>

<body>
<div id="main">
<h2 class="top_title" style="text-align:center">timeago.js自动将时间戳转换为更易读的时间轴</h2>
<div class="demo">
<p class="desc">请留意时间变化，每分钟自动更新一次。</p>
<ul class="list">
<li>您打开此页面的时间：<abbr class="loaded timeago"></abbr></li>
<li>本文更新时间。<abbr class="timeago" title="2013-05-07T20:29:00Z"></abbr></li>
<li>www.corange.cn网站域名注册时间（2006-11-01）。<abbr class="timeago" title="2006-11-01T01:17:00Z"></abbr></li>
</ul>
</div>
</body>
</html>

原文地址: http://www.corange.cn/archives/2013/05/3870.html