CODEWITHSUNDEEP
javascriptjqueryhtmltimertimeago
Mathcore
Mathcore

Reputation: 15

using timeAgo by jQuery (or similar) to show the time ago a user (client) enters or refreshes a page

enter image description here

At the moment this is the result, but the timer doesn't go to "about a minute ago" or "5 minutes ago" etc. it always takes the actual time. I didn't find a solution that works for me.

//timeago by jQuery
(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);

})();


//Uhrzeit
a = new Date ();
b = a.getHours();
c = a.getMinutes();
d = a.getSeconds();
zeit = b+':'+c+':'+d;
document.getElementById("uhrzeit").innerHTML = zeit;

This is how I want to use it in my html doc, it works when I set a date, or when I use "uhrzeit" which is a small script that takes the actual time, but I want the time the client opens the page. Excuse me any inconvenience

<div class="card-footer">
          <small class="text-muted"><time class="timeago" datetime="uhrzeit">December 17, 2019</time></small>
        </div>

Upvotes: 0

Views: 501

Answers (1)

Pedro Mutter
Pedro Mutter

Reputation: 1224

Probably your error is in these lines:

for (var i in elements) {
    var $this = elements;
    if (typeof $this === 'object') {
        $this.innerHTML = timer($this.getAttribute('title') || $this.getAttribute('datetime'));
    }
}

Did you change the title or datetime attributes sometime? Because, if not, you are always sending the same value to the timer function

Edit: Add the last time the user entered as an attribute of the time element.

Like this

<time class="timeago" datetime="2008-07-17T09:24:17Z" title="July 17, 2008">11 years ago</time>

Upvotes: 1

Related Questions