Question

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

css：截图因为这个页面无法格式化我的css哇.. https://s15.postimg.org/kav7m3x3v/css_SO.png

＆＃13;

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;

}

＆＃13;

<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>

＆＃13;

Answer 1

完成后，我改变了＃34;聊天输出＆＃34;的位置。绝对，重要的是将左右设置为0.

Javascript聊天文字到底部

1 个答案: