1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>timeago.js: is a tiny(2kb) library used to format date with `*** time ago`. eg: '3 hours ago'. No dependency.</title>
<meta name="keywords" content="timeago, timeago.js, datetime,*** time ago, javascript timeago, react-timeago, jquery-timeago, timeago.org" />
<meta name="description" content="timeago.js is a tiny(2kb) library used to format date with `*** time ago`. eg: '3 hours ago'. No dependence. and support automatically updating fuzzy timestamps." />
<link rel="shortcut icon" href="demo/clock.png" />
<link rel="bookmark" href="demo/clock.png" />
<style>
* { margin: 0; padding: 0; }
body { font-family: Helvetica,Arial,sans-serif; color: #333; background-color: #ccc; font-size: 16px; line-height: 24px; }
h1 { margin: 0; font-size: 60px; line-height: 100px; text-align: center; }
h2 { margin: -30px 0 40px 50px; font-size: 20px; line-height: 20px; text-align: center; color: #999; }
h3 { margin: 24px 0 6px 0; font-size: 18px; line-height: 18px; border-bottom: 1px solid #ccc; }
h1 img { vertical-align: middle; }
p { margin: 0 0 24px 0; }
p.example { margin: 0 0 12px 0; }
p.how, p.last { margin: 0; }
ul { margin: 0 24px 24px; }
li { line-height: 24px; }
pre { background-color: #3a3a3d; color: #fff; margin: 12px 0; font-size: 12px; padding: 0 6px; word-break:break-all; }
pre em { font-style: normal; background-color: #554; }
pre, tt { font-family: monaco, "courier new", mono, monospace; }
abbr[title], time[title] { border-bottom: 1px dotted #333; }
tt { font-size: 14px; }
a { color: #06e; padding: 1px; }
em { font-style: normal; background-color: #feb; }
a:hover { background-color: #06c; color: #fff; text-decoration: none; }
#content { margin:0 auto; padding: 24px; width:700px; background-color:#fff; border: 1px solid #999; border-width: 0 1px 1px 1px; }
#footer { margin:0 auto 24px; padding: 12px; width:700px; line-height: 24px; }
.help { font-size: 14px; color: #888; }
.strong {font-weight: bold;}
</style>
</head>
<body>
<div id="content">
<h1><img src="demo/clock.png" /> timeago.js</h1>
<h2> a tiny / simple library</h2>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- sorry for ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7292810486004926"
data-ad-slot="7806394673"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<h3>What ?</h3>
<p>
<strong>timeago.js</strong> is a tiny(2kb) library used to format date with `*** time ago`. eg: '3 hours ago'. No dependency. and support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago"). <a href="https://github.com/hustcc/timeago.js">Download</a>, view the examples, and enjoy.
</p>
<p class="example">
You opened this page <time class="need_to_be_rendered load_time strong">when you opened the page</time>. <span class="help">(This will update automatically. Wait for it.)</span>
</p>
<p class="example">
Hustcc was born <span class="need_to_be_rendered strong" datetime="1992-08-01">Aug 01, 1989</span>.
</p>
<h3>Why ?</h3>
<p>timeago.js was built to format date with `*** time ago` statement. You can test timeago.js <a href="demo">here</a> with the live demo.</p>
<ul>
<li>Avoid timestamps dated "1 minute ago" even though the page was opened 10 minutes ago; <em>timeago refreshes automatically</em>.</li>
<li>You can <em>take full advantage of page caching</em> in your web applications, because the timestamps aren't calculated on the server.</li>
<li>Very tiny(less than 2kb), and has <em>no dependency</em>, e.g. jQuery.</li>
</ul>
<h3>How ?</h3>
<p class="how">
First, load and install <a href="https://github.com/hustcc/timeago.js">timeago.js</a> library:
</p>
<pre>
npm install timeago.js</pre>
<p class="how">
Load timeago.js library file with script tag:
</p>
<pre>
<script src="dist/timeago.js" type="text/javascript"></script></pre>
<p class="how">
Or you can use ES6 style:
</p>
<pre>
import timeago from 'timeago.js';
// or
var timeago = require("timeago.js");</pre>
<p class="how">
Now, let's attach it to your timestamps on DOM ready:
</p>
<pre>
timeago().render(document.querySelectorAll('.need_to_be_rendered'));
// or use jquery selector
timeago().render($('.need_to_be_rendered'));</pre>
<p class="how">
This will realtime render all <tt>selected</tt>(javascript DOM selector, or jQuery selector all are supported) elements with a class of <tt>need_to_be_rendered</tt>.
</p>
<pre>
<span class="<em>need_to_be_rendered</em>" datetime="<em>2016-07-07T09:24:17Z</em>">July 07, 2016</span></pre>
<p class="how">
You can also use it programmatically:
</p>
<pre>
timeago().format(new Date()); //=> "<span id="demo_now"></span>"
timeago(null, 'zh_CN').format('2016-09-07') //=> "<span id="demo_20160907"></span>"
timeago().format(1473245023718); //=> "<span id="demo_timestamp"></span>"</pre>
<h3>Locales register ?</h3>
<p>
Yes, timeago.js has locale/i18n/language support. Here are some <a href="https://github.com/hustcc/timeago.js/tree/master/locales">configuration examples</a>. Please submit a <a href="https://github.com/hustcc/timeago.js">GitHub pull request</a> for corrections or additional languages.
</p>
<pre>
var locale = function(number, index, total_sec) {
// number: the timeago / timein number;
// index: the index of array below;
// total_sec: total seconds between date to be formatted and today's date;
return [
['just now', 'right now'],
['%s seconds ago', 'in %s seconds'],
['1 minute ago', 'in 1 minute'],
['%s minutes ago', 'in %s minutes'],
['1 hour ago', 'in 1 hour'],
['%s hours ago', 'in %s hours'],
['1 day ago', 'in 1 day'],
['%s days ago', 'in %s days'],
['1 week ago', 'in 1 week'],
['%s weeks ago', 'in %s weeks'],
['1 month ago', 'in 1 month'],
['%s months ago', 'in %s months'],
['1 year ago', 'in 1 year'],
['%s years ago', 'in %s years']
][index];
};
timeago.register('pt_BR', locale);
var timeagoInstance = timeago();
// then you can use it
timeagoInstance.format(1473245023718, 'pt_BR');</pre>
<h3>Where ?</h3>
<p>Package is managed with npm. so <em>npm install timeago.js</em> will be the latest version.</p>
<p>
The code is hosted on
GitHub: <a href="http://github.com/hustcc/timeago.js">http://github.com/hustcc/timeago.js</a>.
Go on, live on the edge.
</p>
<h3>Who ?</h3>
<p>
timeago.js was built by <a href="http://www.atool.org">Hustcc</a> while standing on the
shoulders of giants.
</p>
<h3>What else ?</h3>
<ul>
<li><em>timeago.js for react</em>: timeago-react is <a href="https://github.com/hustcc/timeago-react">here</a></li>
<li><em>timeago for python</em>: timeago is <a href="https://github.com/hustcc/timeago">here</a></li>
</ul>
<p class="example">
Other timeago, welcome to pull a request.
</p>
<h3>Do you use timeago.js ?</h3>
<p>
Great! Please let me know, and can add into the README</a>.
</p>
</div>
<div id="footer">
Copyright © 2016 Theme from <a href="http://timeago.yarp.com/" target="_blank" rel="nofollow">jQuery-timeago</a>.
Updated by <a href="http://Github.com/hustcc">Hustcc</a>
</div>
<script src="dist/timeago.min.js" type="text/javascript"></script>
<script src="dist/timeago.locales.min.js" type="text/javascript"></script>
<script src="demo/index.js" type="text/javascript"></script>
<script type="text/javascript">
init_index_page();
</script>
<span style="display:none">
<script src="http://s4.cnzz.com/stat.php?id=1257060683&web_id=1257060683" language="JavaScript"></script>
</span>
</body>
</html>
|
