实时显示日期时间问题 (JavaScript/JQuery)

Question

为了与 websocket 进行实时聊天，我想以这种方式显示消息发布的时间："% sec/min/hour/day now"。

对于这个事实，经过一番研究，我发现我修改了两个函数：

    // Get the TimeStamp
    var msgDate = new Date();

    // Update
    updateTimeStamp();

    min = 3000;
    max = 4000;

    setInterval(updateTimeStamp, Math.floor(Math.random() * max) + min);

    function updateTimeStamp() {
        // Update 
        var timeAgo = time_ago(msgDate);
        $(".timeStamp").html(timeAgo);
    }

此功能刷新我的“.timeStamp”类自动更新消息时间。

        function time_ago(time) {

        switch (typeof time) {
        case 'number':
            break;
        case 'string':
            time = +new Date(time);
            break;
        case 'object':
            if (time.constructor === Date) time = time.getTime();
            break;
        default:
            time = +new Date();
        }
        var time_formats = [
        [60, 'sec', 1], // 60
        [120, '1 min', '1 min'], // 60*2
        [3600, 'min', 60], // 60*60, 60
        [7200, '1 heure', '1 heure'], // 60*60*2
        [86400, 'heures', 3600], // 60*60*24, 60*60
        [172800, 'Hier', 'Demain'], // 60*60*24*2
        [604800, 'jours', 86400], // 60*60*24*7, 60*60*24
        [1209600, 'Semaine dernière', 'Semaine prochaine'], // 60*60*24*7*4*2
        [2419200, 'semaines', 604800], // 60*60*24*7*4, 60*60*24*7
        [4838400, 'Mois dernier', 'Mois suivant'], // 60*60*24*7*4*2
        [29030400, 'mois', 2419200], // 60*60*24*7*4*12, 60*60*24*7*4
        [58060800, 'L\'an dernier', 'Next year'], // 60*60*24*7*4*12*2
        [2903040000, 'years', 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
        [5806080000, 'Last century', 'L\'année prochaine'], // 60*60*24*7*4*12*100*2
        [58060800000, 'Une décennie', 2903040000] // 60*60*24*7*4*12*100*20, 60*60*24*7*4*12*100
        ];
        var seconds = (+new Date() - time) / 1000,
        list_choice = 1;

        if (seconds < 0) {
        seconds = Math.abs(seconds);
        list_choice = 2;
        }
        var i = 0,
        format;
        while (format = time_formats[i++])
        if (seconds < format[0]) {
            if (typeof format[2] == 'string')
            return format[list_choice];
            else
            return Math.floor(seconds / format[2]) + ' ' + format[1];
        }
        return time;
    }

此函数将时间转换为字符串以显示“秒、分、小时等”

但是，当我发送第一条消息时，一切正常。当我发送第二条消息时，时间甚至不再出现。

编辑：

既然好心人已经成功调试了我的第一个问题，我还有另一个问题。当我发送消息时，时间会更新得很好，但会考虑到第一条消息的时间。例如：

1 分钟前发送的第一条消息

第二条消息会自动占用第一条消息的时间。

这是我用来显示时间的 HTML 代码：

<small class="timeStamp text-muted my-auto"></small></li>

如果有慈善人士能在这个问题上启发我，我会很高兴。

祝你有美好的一天！

Answer 1

您的问题是您只为所有输出创建一个时间戳 - 我会将时间戳添加到元素（作为属性 - 例如 data-timestamp）并使用每个元素的此值计算它。

这是一个例子：

    // Update
    updateTimeStamp();

    min = 3000;
    max = 4000;

    setInterval(updateTimeStamp, Math.floor(Math.random() * max) + min);

    function updateTimeStamp() {
        // Update
        $(".timeStamp").each(function() {
            $(this).text(time_ago(parseInt($(this).data('timestamp')) * 1000));
        }) 
    }



       function time_ago(time) {
        switch (typeof time) {
        case 'number':
            break;
        case 'string':
            time = +new Date(time);
            break;
        case 'object':
            if (time.constructor === Date) time = time.getTime();
            break;
        default:
            time = +new Date();
        }
        var time_formats = [
        [60, 'sec', 1], // 60
        [120, '1 min', '1 min'], // 60*2
        [3600, 'min', 60], // 60*60, 60
        [7200, '1 heure', '1 heure'], // 60*60*2
        [86400, 'heures', 3600], // 60*60*24, 60*60
        [172800, 'Hier', 'Demain'], // 60*60*24*2
        [604800, 'jours', 86400], // 60*60*24*7, 60*60*24
        [1209600, 'Semaine dernière', 'Semaine prochaine'], // 60*60*24*7*4*2
        [2419200, 'semaines', 604800], // 60*60*24*7*4, 60*60*24*7
        [4838400, 'Mois dernier', 'Mois suivant'], // 60*60*24*7*4*2
        [29030400, 'mois', 2419200], // 60*60*24*7*4*12, 60*60*24*7*4
        [58060800, 'L\'an dernier', 'Next year'], // 60*60*24*7*4*12*2
        [2903040000, 'years', 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
        [5806080000, 'Last century', 'L\'année prochaine'], // 60*60*24*7*4*12*100*2
        [58060800000, 'Une décennie', 2903040000] // 60*60*24*7*4*12*100*20, 60*60*24*7*4*12*100
        ];
        var seconds = (+new Date() - time) / 1000,
        list_choice = 1;

        if (seconds < 0) {
        seconds = Math.abs(seconds);
        list_choice = 2;
        }
        var i = 0,
        format;
        while (format = time_formats[i++])
        if (seconds < format[0]) {
            if (typeof format[2] == 'string')
            return format[list_choice];
            else
            return Math.floor(seconds / format[2]) + ' ' + format[1];
        }
        return time;
    }

.msg {
  margin-bottom: 10px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<body>
    <div class="msg">
        <div class="content">Merry xmas!</div>
        <div class="timeStamp" data-timestamp="1577275200"></div>
    </div>
    <div class="msg">
        <div class="content">Happy new year!</div>
        <div class="timeStamp" data-timestamp="1577880000"></div>
    </div>
    <div class="msg">
        <div class="content">Question on stackoverflow</div>
        <div class="timeStamp" data-timestamp="1578398400"></div>
    </div>