twitterぽく何分前を表示するJavaScript「timeago: a jQuery plugin」

twitterではそれぞれのtweetが何分前や何時間前などを表示します。
それと同じようなことがJavaScriptのjQueryプラグイン「timeago: a jQuery plugin」で実現可能です。

使用方法

timeago: a jQuery pluginからjquery.timeago.jsをjQueryからjquery.jsをダウンロードします。


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.timeago.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('abbr.timeago').timeago();
});
</script>

上記のように記述したら、表示させたい場所にhtmlを書きます。


<abbr class="timeago" title="2009-07-17T09:24:17Z">表示テキスト</abbr>

※title部分は始点の時間を記述します。
また、別の記述だと以下のようになります。


$(document).ready(function(){
	$("#id名1").text(jQuery.timeago(new Date())); // 今の時間の場合
	$("#id名2").text(jQuery.timeago("1981-11-30")); //1981年11月30日の場合
});

あとは対応するidを書けば完成です。


<span id="id名1"></span>
<span id="id名2"></span>

サンプル

2009年7月17日午前9時24分17秒
2009年11月4日午後8時24分17秒
このページを開いたのは...
私が生まれたのは...

Javascriptサンプルページ一覧

skuare.net