Javascript聊天文本到底部

Javascript Chat text to the bottom

本文关键字：底部 文本 聊天 Javascript      更新时间：2023-09-26

我用javascript创建了一个聊天系统。发送的消息在右边，接收的消息在左边。
现在我想把它们显示在底部(目前它们在顶部)。但是，如果我将父div设置为底部，则发送和接收的消息都显示在一侧。

css:截图，因为这个页面不能格式化我的css哇。https://s15.postimg.org/kav7m3x3v/css_SO.png 

win.document.getElementById('input-text-chat').onkeyup = function (e) {
    if (e.keyCode != 13) return;
    // removing trailing/leading whitespace
    this.value = this.value.replace(/^'s+|'s+$/g, '');
    var a = new Date();
    var b = a.getHours();
    var c = a.getMinutes();
    var d = a.getSeconds();
    if (b < 10) {
        b = '0' + b;
    }
    if (c < 10) {
        c = '0' + c;
    }
    if (d < 10) {
        d = '0' + d;
    }
    var time = b + ':' + c + ':' + d;
    if (!this.value.length) return
    connection.send('<div class="chat-OutputGET bubbleGET"> <font color="white"> User(' + time + '): ' + this.value + '</font></div>');
    console.log(connection.send);
    console.log('User (' + time + '): ' + this.value);
    appendDIV('<div class="chat-OutputSEND bubble"> <font color="white"> Me (' + time + '): ' + this.value + '</font></div>');
    this.value = '';
};
var chatContainer = win.document.querySelector('.chat-output');
function appendDIV(event) {
    console.log(event);
    var div = document.createElement('div');
    div.innerHTML = event.data || event;
    chatContainer.appendChild(div);
    div.tabIndex = 0;
    div.focus();
    win.document.getElementById('input-text-chat').focus();
}
connection.onmessage = appendDIV;
}
<div id="chatHtml" style="display: none;">
    <link rel="stylesheet" href="style/main.css">
    <div id=chatOutput class="chat-output"></div>
    <textarea class="form-control" rows="1" id="input-text-chat" placeholder="Enter Text Chat"></textarea>
    <div id="chat-container">
    </div>
</div>

完成，我将"chat-output"的位置更改为绝对，重点是将left和right设置为0。

相关文章：