0
jsonファイルからデータを取得します。彼らはこのフォームを持っています（これらはメッセージです）。出力時間に間違ったスクリプト動作
[
{
"time": "1499877171",
"user": "qwe",
"message": "qwe"
},
{
"time": "1499877174",
"user": "qwe",
"message": "qwe"
},
{
"time": "1499877175",
"user": "qwe",
"message": "qwe"
}
]
（秒単位の "時間"）
スクリプトは、最後の時間のためのメッセージが表示されるはずです。これは実行されますが、画面に表示される時間は正しくありません。
このようにする必要があります。ユーザーはページに行き、最後の1時間にメッセージが表示され、書き換えられ、新しいメッセージがすべて表示されます。
しかし、私は最後の時間のメッセージが間違った時間とともに表示され、さらには正しくないメッセージが出力されるようになります。
すべてのメッセージは、最後の時間で表示されますが、彼らはすでに示されている場合（それが今のように）私は、新しいメッセージがすぐにではなく、表示示されることを必要とする
$.getJSON('data/messages.json', callback);
//I take messages from the file
callback([
{
"time": "1499877171",
"user": "qwe",
"message": "qwe"
},
{
"time": "1499877174",
"user": "qwe",
"message": "qwe"
},
{
"time": "1499877175",
"user": "qwe",
"message": "qwe"
}
]);
function callback(respond) {
setTimeout(function tick() {
for (var i = 0; i < respond.length; i++) {
var data = respond[i];
var now = Date.now();
var diff_time = Math.floor(now - ((data.time) * 1000));
if (diff_time <= 3600000) {
var new_date = new Date(diff_time);
var res = [new_date.getHours(), new_date.getMinutes(), new_date.getSeconds()].map(function(x) {
return x < 10 ? "0" + x : x;
}).join(":");
var rowClone = $('.mess_hide').clone().removeClass('mess_hide');
$('#messages').append(rowClone);
$('.time', rowClone).html(res);
$('.name', rowClone).html(data.user);
$('.message', rowClone).html(data.message);
$('.scroller').scrollTop($('#messages').height());
}
}
setTimeout(tick, 3600000);
}, 1);
}.scroller {
width: 490px;
height: 255px;
max-height: 255px;
overflow-y: auto;
overflow-x: hidden;
}
table#messages {
min-height: 260px;
width: 100%;
background: #fffecd;
border: none;
}
table#messages::-webkit-scrollbar {
width: 1em;
}
table#messages::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
table#messages::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
tr {
height: 20%;
display: block;
}
td.time,
td.name {
width: 70px;
max-width: 75px;
text-align: center;
}
td.name {
font-weight: bold;
}
form#text_submit {
display: inline-flex;
align-items: flex-start;
}
input#text {
width: 370px;
height: 30px;
margin-top: 20px;
background: #fffecd;
font-family: 'Montserrat';
font-size: 16px;
border: none;
align-self: flex-start;
}
input#submit {
padding: 0;
margin-left: 21px;
margin-top: 21px;
height: 30px;
width: 95px;
background: #635960;
border: none;
color: white;
font-family: 'Montserrat';
font-size: 16px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
<table id="messages">
<tr class="mess_hide">
<td class="time"></td>
<td class="name"></td>
<td class="message"></td>
</tr>
</table>
</div>
<form method="POST" id="easyForm">
<input type="text" name="text" id="text">
<input type="submit" value="Send" id="submit">
</form>
</div>だから、私は少し質問があります：
1.時間は間違って表示されますか？
2.確認方法：このメッセージは既に表示されていますか？
各項目にインクリメンタルIDを使用する...毎回最高のIDを格納し、格納されたIDに基づいてフィルタを適用して、新しいものと何が見られるものかを確認します。必要に応じてlocalStorageに保存してください – charlietfl
「間違った時間」とはどういう意味ですか？時間が間違ってフォーマットされていますか？それはいくつかのタイムスパンによってオフですか？それは別のメッセージから時間を示していますか？期待される結果は何であり、実際の結果は何ですか？これにより、調整が必要な要素を判断するのに役立ちます。 – TLS
@TLS私は、読み込み可能なバージョンに時間を翻訳するとき、何かがうまくいかず、正しく表示されない（メッセージが書き込まれた時ではない） –