Question

我想更新页面上记录li或div上显示的时间。我已将创建此记录的时间放在每个记录的隐藏字段中。

示例：

# 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'>

我如何每分钟更新一次？所以一分钟后第一个div应该说是6分钟前第二个会说11分钟前？

是否可以使用JS。我不想为此而去php。只是使用JS。 DB中的时间存储为strtotime(date("Y-m-d H:i:s"))

谢谢！

Answer 1

就个人而言，我会像这样使用HTML：

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

然后在你的脚本中有类似的东西：

(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);
  });
})();

Answer 2

您可以尝试使用Moment.js这是一个非常轻量级的库，用于与Javascript中的时间管理相关的所有内容。 API非常清晰，文档齐全，功能强大。我正在将它用于我的一个项目，到目前为止我非常满意。

您可以使用时间自动更新处理程序，这正是您想要的，非常容易使用类似下面的示例：

时刻（“20111031”，“YYYYMMDD”）。fromNow（）; //一年前

时刻（“20120620”，“YYYYMMDD”）。fromNow（）; // 6个月前

矩（）STARTOF（ '日'）fromNow（）。; // 19小时前

矩（）endOf（ '日'）fromNow（）。; //在5个小时内

要使时间自行刷新，可以在setInterval处理程序中调用这些函数。

Answer 3

你可以在JS中做到这一点，你需要一些部分：

确定需要更改的部分并为其创建时间
每分钟更新一次的计时器，你需要php告诉js它有什么时间
在页面加载时将时间转换为可读文本的脚本。

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.")
    }

如何使用JS客户端更新时间

3 个答案: