A Pen by goker.

index.html

<ul id="usage">
    <li class="header">
        <h1>Javascript TimeAgo Function (e.g. 8 hours ago)</h1>
    </li>
    <li class="usage"></li>
    <li class="usage"></li>
    <li class="usage"></li>
    <li class="usage"></li>
    <li class="footer">
      <a href="https://coderwall.com/p/uub3pw">https://coderwall.com/p/uub3pw</a> | 
      <a href="http://jsfiddle.net/goker/3J9Dz/">http://jsfiddle.net/goker/3J9Dz/</a>
      <a class="followme" href="https://github.com/gokercebeci">follow me</a>
      
    </li>
</ul>

script.js

// set HTML
var date = new Date();
var DateString = date.toDateString();
var ISOString = date.toISOString();
var timestamp = (date.getTime() / 1000) >> 0;
var temps = ['<abbr class="timeago" title="' + DateString + '">' + DateString + '</abbr>',
    '<abbr class="timeago" title="' + ISOString + '">' + ISOString + '</abbr>',
    '<time class="timeago" datetime="' + ISOString + '">' + ISOString + '</time>',
    '<span class="timeago" title="' + timestamp + '">' + timestamp + '</span>'];
var elements = document.getElementsByClassName('usage'), j = 0;
function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
for (var i in elements) {
    var $this = elements[i];
    if (typeof $this === 'object') {
        console.log(temps[j]);
        $this.innerHTML = (temps[j]) + '<code>' + htmlEntities(temps[j++]) + '</code>';
    }
}

// timeAgo Function
(function timeAgo(selector) {

    var templates = {
        prefix: "",
        suffix: " ago",
        seconds: "less than a minute",
        minute: "about a minute",
        minutes: "%d minutes",
        hour: "about an hour",
        hours: "about %d hours",
        day: "a day",
        days: "%d days",
        month: "about a month",
        months: "%d months",
        year: "about a year",
        years: "%d years"
    };
    var template = function (t, n) {
        return templates[t] && templates[t].replace(/%d/i, Math.abs(Math.round(n)));
    };

    var timer = function (time) {
        if (!time) return;
        time = time.replace(/\.\d+/, ""); // remove milliseconds
        time = time.replace(/-/, "/").replace(/-/, "/");
        time = time.replace(/T/, " ").replace(/Z/, " UTC");
        time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"); // -04:00 -> -0400
        time = new Date(time * 1000 || time);

        var now = new Date();
        var seconds = ((now.getTime() - time) * .001) >> 0;
        var minutes = seconds / 60;
        var hours = minutes / 60;
        var days = hours / 24;
        var years = days / 365;

        return templates.prefix + (
        seconds < 45 && template('seconds', seconds) || seconds < 90 && template('minute', 1) || minutes < 45 && template('minutes', minutes) || minutes < 90 && template('hour', 1) || hours < 24 && template('hours', hours) || hours < 42 && template('day', 1) || days < 30 && template('days', days) || days < 45 && template('month', 1) || days < 365 && template('months', days / 30) || years < 1.5 && template('year', 1) || template('years', years)) + templates.suffix;
    };

    var elements = document.getElementsByClassName('timeago');
    for (var i in elements) {
        var $this = elements[i];
        if (typeof $this === 'object') {
            $this.innerHTML = timer($this.getAttribute('title') || $this.getAttribute('datetime'));
        }
    }
    // update time every minute
    setTimeout(timeAgo, 60000);

})();

style.css

html, body {
    margin: 0;
    padding:0;
    height: 100%;
    font: 12px/normal sans-serif;
    background: #000;
}
abbr, time, span {
    font-family: sans-serif;
    display: block;
}
#usage {
    margin: 20px auto;
    width: 700px;
}
#usage li {
    position: relative;
    margin: 5px 0;
    padding: 0 10px;
    line-height: 36px;
    color: #222;
    background: #fff;
    list-style: none;
}
#usage code, .followme {
    position: absolute;
    top:0;
    right:0;
    padding: 0 10px;
    height: 100%;
    font-size: 10px;
    color: #eee;
    background: #111;
}
a, a.followme  {
  color: #18d;
  font-size: 12px;
  text-decoration: none;
  background: transparent;
}

TimeAgo.markdown

TimeAgo

It is native Javascript function for automatically updating fuzzy timestamps (e.g. "8 minutes ago").

A Pen by goker on CodePen.

License.