Question

我想知道网站如何在没有ajax请求的情况下动态更新时间？我所拥有的是评论系统。

$('#comment').click(function(){

   $.post(url,{
       comment : $(this).siblings('textarea.#comment_content').val();
   },function(data){
           $('#comments').append(data.output);
   },'json'); 

});

PHP

<?php


   //get comment and update into DB

   $output .= '<div class="comment-text">'.$comment_text.'</div>';   //comment entered right now

   $output .='<div class="showTime">'.getTime(time()).'</div>';

/*
  getTime() is a function where time is entered and calculated according to current "time()" and formatted in words

*/
?>

因为现在添加了评论，如何在没有ajax请求的情况下更改.showTime内的内容？

更新

我发送一个php时间（）给javascript进行处理，但是它显示无效日期，这里发生了什么

<div class="tstamp" time="<?php echo strtotime($row['time']) ?>" ></div> //time from database

当我通过js收到此消息时，它显示无效日期

var $time = new Date($('.tstamp').attr('time'));
console.log($time);   //console shows error

我也试过这些格式但同样的问题...

D M d Y H:i:s O
d/m/Y H:i:s
d/m/Y H:i:s A

更新将strtotime与1000

相乘

Answer 1

如果我正确理解了这个问题，那么你可以做的就是在页面加载或评论发布时从ajax获取时间/时间戳。之后，您可以使用简单的javascript根据存储的临时和当前时间戳的不同bw时间戳来更新该时间。您可以使用data-time =“timestamp”或任何其他变体来存储初始时间戳。

编辑：这是代码（只是我头脑中的顶部）

<script src="jquery.js"></script>
<div data-time="<?php echo time(); ?>">This div will update time every 5 seconds</div>
<script>
jQuery(document).ready(function(){
setInterval(function(){
var now=new Date().getTime();
now=Math.floor(now/1000);   //converting to seconds
var then=parseInt($("div").attr("data-time"));
var diff=now-then;
$("div").html(diff+" seconds ago"); //convert this to minutes etc etc!
},5000);
});
</script>

P.S。不过你不需要jquery！

Answer 2

由于你不想一次又一次地使用ajax，你可以去使用node.js. Node.js主要使用套接字，如果它是可用的更快和更快。数据传输就像实时一样，如果它不使用轮询。这与ajax类似。

您可以直接将node.js与数据库系统集成。但是如果你想用php清楚地使用它是This is a nice tutorial。或者你可以查找使用node.js构建的聊天系统。

即使我不认为对于小型网站来说，这种方法也会很有效率。

如果您不喜欢使用自定义评论系统，则可以使用预建系统here。 This is a nice tutorial to begin with.

Answer 3

我不太了解php，但我相信你可以用javascript来更新时间。您可以将评论时间存储在属性中 '';

然后创建将定期调用的代码并更新所有注释。

setInterval(function(){
    //get all .showTime -> read time from attribute -> update value
}, 60000); // 60k to update every minute

如果您想显示用户友好时间，那么使用http://momentjs.com/ timeago功能

会很不错

Answer 4

好的，我们走了：

示例HTML：

<section id="comments">
    <article id="comment-1" class="comment">
        <div class="user-image">
            <img src="http://lorempixel.com/50/50/cats" />
        </div>
        <div class="user-info">
            <h2>Derp</h2>
            <time datetime="05/21/2014 09:00:52 AM"></time>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada vestibulum dui, eget posuere justo vulputate vitae. Sed fringilla nisi eu est ullamcorper, at dictum arcu gravida.
        </div>
    </article>

        <article id="comment-2" class="comment">
        <div class="user-image">
            <img src="http://lorempixel.com/50/50/cats" />
        </div>
        <div class="user-info">
            <h2>Derpina</h2>
            <time datetime="05/19/2014 23:00:24"></time>
        </div>
        <div class="text">
            Quisque sit amet venenatis urna. 
        </div>
    </article>
</section>

示例CSS：

#comments{

}

#comments .comment{
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
}

#comments .comment .user-image{
    position:relative;
    width:50px;
    height:50px;
    float:left;
    margin-right:10px;
}

#comments .comment .user-info{
    overflow:hidden;
}

#comments .comment .user-info h2{
    font-size:14px;
    margin-top:0;
    float:left;
}

#comments .comment .user-info time{
    font-size:12px;
    float:right;
}

和JS：

$(function(){
    var $second = 1000;
    var $minute = $second * 60;
    var $hour = $minute * 60;
    var $day = $hour * 24;

    setInterval(function(){
        $('.comment').each(function(){
            var $this = $(this);
            var $time = new Date($this.find('time').attr('datetime'));
            var $now = new Date();

            var $distance = $now - $time;

            var $days = Math.floor($distance / $day);
            var $hours = Math.floor(($distance % $day) / $hour);
            var $minutes = Math.floor(($distance % $hour) / $minute);
            var $seconds = Math.floor(($distance % $minute) / $second);

            var $time_string = '';

            if($days > 0) {
                $time_string = $time_string + $days + ' Day(s) ';
            }

            if($hours > 0) {
                $time_string = $time_string + $hours + ' Hour(s) ';
            }

            if($minutes > 0) {
                $time_string = $time_string + $minutes + ' Minute(s) ';
            }

            if($seconds > 0) {
                $time_string = $time_string + $seconds + ' Second(s)';
            }

            $this.find('time').text($time_string);
        });
    }, 1000);
});

工作示例：

http://jsfiddle.net/d4Jp7/

感谢：

https://stackoverflow.com/a/9335296/339205

使用php ajax动态更新时间

4 个答案: