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

来源:互联网 发布:做淘宝仓库打包员累吗 编辑:程序博客网 时间:2024/05/19 02:03
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
原创粉丝点击