How to update time using JS client side

Question

I want to update the time shown on the records li or divs on a page. I have put the time of creation of this record in a hidden field with each record.

example:

# Hi what are you doing? 
  5 minute ago.  <hidden id='1' value='1345888475'>

# Akon song is good 
  10 minute ago  <hidden id='2' value='1345888855'>

# I love the way you lie
  15 minute ago <hidden id='3' value='1345889995'>

How can I update that time each minute? So after one minute the first div should say 6 minute ago and second would say 11 minute ago?

Is that possible using JS. I dont want to go php for this. Just using JS. Time in DB is stored like strtotime(date("Y-m-d H:i:s"))

Thank you!

@TomWalters Obviously nope, he's cooking while programming, and he needs something fresh to eat. — user529758
– user529758, Commented Dec 21, 2012 at 18:13
Darn, now if I go and edit all the "mints" to "minutes" to clarify the question it will ruin this comment thread. — pjmorse
– pjmorse, Commented Dec 21, 2012 at 18:15
I'm risking getting a ban, but I had to put a new tag there... — Shomz
– Shomz, Commented Dec 21, 2012 at 18:17
Mint Mentha is a genus of flowering plants in the family Lamiaceae. The species are not clearly distinct and estimates of the number of species varies from 13 to 18. Hybridization between some of the species occurs naturally — NullPoiиteя
– NullPoiиteя, Commented Dec 21, 2012 at 18:19

Niet the Dark Absol · Accepted Answer · 2012-12-21 18:20:27Z

5

Personally I'd use HTML like this:

<span data-time="1345888475">Loading...</span>

Then in your script have something like:

(function() {
  var timetostring(secs) {
      if( secs < 60) return secs+" seconds ago";
      secs = Math.floor(secs/60);
      if( secs < 60) return secs+" minutes ago";
      secs = Math.floor(secs/60);
      if( secs < 24) return secs+" hours ago";
      secs = Math.floor(secs/24);
      return secs+" days"; // you can of course continue
  };
  (function() {
      var qsa = document.querySelectorAll("[data-time]"), l = qsa.length, i, t;
      for(i=0; i<l; i++) {
          t = new Date().getTime()/1000-qsa[i].getAttribute("data-time");
          qsa[i].firstChild.nodeValue = timetostring(t);
      }
      setTimeout(arguments.callee,15000);
  });
})();

answered Dec 21, 2012 at 18:20

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iZeshan Over a year ago

Thanks a lot :) that is perfect and simple.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You can try to use Moment.js which is a wonderfull and very lightweight library for everything related to time management in Javascript. The API is very clear, well documented and powerfull. I am using it for one of my projects, and i am very satisfied so far.

You can use time automatic update handlers which is exactly what you want, very easily with something like the examples below :

moment("20111031", "YYYYMMDD").fromNow(); // a year ago

moment("20120620", "YYYYMMDD").fromNow(); // 6 months ago

moment().startOf('day').fromNow(); // 19 hours ago

moment().endOf('day').fromNow(); // in 5 hours

To make the time refreshes itself, you can call these functions whithin a setInterval handler.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 21, 2012 at 18:16

Halim Qarroum

14.1k4 gold badges48 silver badges75 bronze badges

Comments

Patrick Gunderson · Accepted Answer · 2012-12-21 18:37:45Z

You can do this in JS, you need a few parts:

Identify the parts that need to change and give their creation time
A timer that updates the times every minute, you'll need php to tell js what time it has
A script that transforms the times into readable text at page load.

http://jsfiddle.net/gunderson/srKET/

    <div class="message" id='1' data-timestamp='1345888475'>
    <span class="content"># Hi what are you doing? </span><br/>
    <span class="timeAgo">5 mint ago. </span>
    </div>

    var currentTime = <?=time()?>;
    var timestampHandler = setInterval(onUpdateTimestamp, 60 * 1000); //one minute
    function onUpdateTimestamp(){
         currentTime += 60;
         $(".message").each(updateTimeAgo);
    }

    function updateTimeAgo(){
        var $el = $(this);
        var postTime = parseInt($el.data('timestamp'));
        var newTimeAgo = (currentTime - postTime) / 60; //minutes
        $el.find(".timeAgo").html(newTimeAgo + " mint ago.")
    }

Collectives™ on Stack Overflow

How to update time using JS client side

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related