提供“社交网络”岗位的失效时间

jsFiddle.

I have created a little javascript snippet that can take two inputs and make a sort of "post" using those. In those posts, it says something like:

我创建了一个小的javascript代码片段,它可以使用两个输入并使用它们进行某种“发布”。在这些帖子中,它表示如下:

Hi!

Posted by Random Person _ minutes ago.

由Random Person发表_分钟前。

but without the underscore, it should say the lapsed time between now and the time posted. I am having difficulty thinking of how to do this, but this is what I am currently using:

但是没有下划线,它应该说现在和发布时间之间的失效时间。我很难想到如何做到这一点,但这正是我目前使用的:

$('#b').click(function () {
    var v = $('#type').val();
    var u = $('#input').val();
    if (v !== "" && u !== "") {
        var time = new Date();
        var currentime = Date.now();
        var x = currentime - time;
        $("ul").prepend("<li>" + v + "<br />Posted by " + u + " " + x + " minutes ago  </li>");
        $('#type, #input').css('border', '');
    } else if (v == "" && u == "") {
        $('#type, #input').css('border', '1px solid red');
    } else if (v == "") {
        $('#type').css('border', '1px solid red');
        $('#input').css('border', '');
    } else {
        $('#input').css('border', '1px solid red');
        $('#type').css('border', '');
    }
});

#type, #input {
    border-radius: 10px;
    background: #dadae3;
    color: #59ACFF;
    border: 1px solid #dadae3;
}
#type {
    border-bottom-right-radius: 0;
}
#type:hover, #input:hover {
    background: #c4c4cc;
    color: #488CCF;
    border: 1px solid #c4c4cc;
}
#type:hover::-webkit-input-placeholder {
    color: #59ACFF
}
#input:hover::-webkit-input-placeholder {
    color: #59ACFF
}
#type:focus, #input:focus {
    border: 1px solid #59ACFF;
    outline: 0;
}
button {
    height: 30px;
    background: #dadae3;
    border-radius: 10px;
    border: 1px solid #dadae3;
    color: #59ACFF;
    cursor: pointer;
}
button:hover {
    background: #c4c4cc;
    color: #488CCF;
    border: 1px solid #c4c4cc;
}
button:focus {
    outline: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<br />
<textarea id='type'></textarea>
<br />
<br />
<input id='input'>
<br />
<br />
<button id='b'><span class='fa fa-plus-square-o fa-2x'></span>

</button>
<ul id='ul'></ul>

I realize that this is wrong, but I cannot think of other ways to do this. I would like the lapsed time to be updated every minute, also.

我意识到这是错误的,但我想不出其他方法可以做到这一点。我希望每分钟都能更新失效时间。

Thank you. :)

谢谢。 :)

2 个解决方案

#1

Here's my implementation of it. The updatePost function is called every 10 seconds to update the time in the post. Slight adjustments are also made to the code (eliminating repeated $('#type, #input').css('border', '');, etcetera).

这是我的实现。每10秒调用一次updatePost函数来更新帖子中的时间。对代码进行了轻微调整(消除了重复的$('#type,#input')。css('border','');等等。

Remember to open your web console to view debug outputs.

请记住打开Web控制台以查看调试输出。

This can also be found on JSFiddle.

这也可以在JSFiddle上找到。

Update:

1. Separated setInterval function upon Martin's suggestion.

根据Martin的建议分开setInterval函数。

2. The new example now takes advantage of the data attribute.

新示例现在利用了data属性。

// Update the posts every 10 seconds
setInterval(function () {
    console.log('Updating posts...');
    $('ul .time').each(function (id, span) {
        time = Math.round((new Date() - $(span).data('timestamp')) / 60000);
        $(span).text(time);
    });
}, 10000);

$('#b').click(function () {
    var v = $('#type').val();
    var u = $('#input').val();
    $('#type, #input').css('border', '');

    if (v !== "" && u !== "") {
        // Generate a timestamp for every post
        var timestamp = Date.now();

        $("ul").prepend('<li>' +
            '<span class="body">' + v + '</span><br />' +
            'Posted by ' +
            '<span class="author">' + u + '</span> ' +
            '<span class="time" data-timestamp="' + timestamp + '">0</span>' +
            ' minutes ago  </li>');

    } else {
        if (v == "") {
            $('#type').css('border', '1px solid red');
        }
        if (u == "") {
            $('#input').css('border', '1px solid red');
        }
    }
});

#type,
#input {
  border-radius: 10px;
  background: #dadae3;
  color: #59ACFF;
  border: 1px solid #dadae3;
}
#type {
  border-bottom-right-radius: 0;
}
#type:hover,
#input:hover {
  background: #c4c4cc;
  color: #488CCF;
  border: 1px solid #c4c4cc;
}
#type:hover::-webkit-input-placeholder {
  color: #59ACFF
}
#input:hover::-webkit-input-placeholder {
  color: #59ACFF
}
#type:focus,
#input:focus {
  border: 1px solid #59ACFF;
  outline: 0;
}
button {
  height: 30px;
  background: #dadae3;
  border-radius: 10px;
  border: 1px solid #dadae3;
  color: #59ACFF;
  cursor: pointer;
}
button:hover {
  background: #c4c4cc;
  color: #488CCF;
  border: 1px solid #c4c4cc;
}
button:focus {
  outline: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<br />
<textarea id='type'></textarea>
<br />
<br />
<input id='input'>
<br />
<br />
<button id='b'><span class='fa fa-plus-square-o fa-2x'></span>

</button>
<ul id='ul'></ul>

PS: enhancements such as differentiating 'Minutes' and 'Minute' should also be implemented.

PS:还应实施区分“分钟”和“分钟”等增强功能。

#2

What about this tiny modification to your code?

对代码的这种微小修改怎么样?

The trick is to store a custom param in a span with the time and then update regularly.

诀窍是在时间跨度中存储自定义参数,然后定期更新。

$('#b').click(function () {
    var v = $('#type').val();
    var u = $('#input').val();
    if (v !== "" && u !== "") {
        $("ul").prepend("<li>" + v + "<br />Posted by " + u + " <span posted=\""+ currentime + "\">0</span> minutes ago  </li>");
        $('#type, #input').css('border', '');
    } else if (v == "" && u == "") {
        $('#type, #input').css('border', '1px solid red');
    } else if (v == "") {
        $('#type').css('border', '1px solid red');
        $('#input').css('border', '');
    } else {
        $('#input').css('border', '1px solid red');
        $('#type').css('border', '');
    }
});

setInterval(function() {
    $('ul span').each(function(id, span) {
        time = Math.round((new Date() - $(span).attr('posted')) / 60000);
        $(span).text(time);
    });
}, 5000);

#type, #input {
    border-radius: 10px;
    background: #dadae3;
    color: #59ACFF;
    border: 1px solid #dadae3;
}
#type {
    border-bottom-right-radius: 0;
}
#type:hover, #input:hover {
    background: #c4c4cc;
    color: #488CCF;
    border: 1px solid #c4c4cc;
}
#type:hover::-webkit-input-placeholder {
    color: #59ACFF
}
#input:hover::-webkit-input-placeholder {
    color: #59ACFF
}
#type:focus, #input:focus {
    border: 1px solid #59ACFF;
    outline: 0;
}
button {
    height: 30px;
    background: #dadae3;
    border-radius: 10px;
    border: 1px solid #dadae3;
    color: #59ACFF;
    cursor: pointer;
}
button:hover {
    background: #c4c4cc;
    color: #488CCF;
    border: 1px solid #c4c4cc;
}
button:focus {
    outline: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<br />
<textarea id='type'></textarea>
<br />
<br />
<input id='input'>
<br />
<br />
<button id='b'><span class='fa fa-plus-square-o fa-2x'></span>

</button>
<ul id='ul'></ul>