1
こんにちは私はJavascriptでチャットをしましたが、今では送信メッセージが左側に表示され、右側に受信されます。 HTMLチャットメッセージを左に受信しました
<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>
Javascriptを
openChat: function(){
win =window.open('','myconsole',
'width=450,height=500'
+',menubar=0'
+',toolbar=1'
+',status=0'
+',scrollbars=1'
+',resizable=1')
win.document.writeln("<body style='background-color:#ecf0f1'></body>");
chat = document.getElementById("chatHtml").innerHTML;
win.document.write(chat);
win.document.title = "Live Chat";
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
win.document.getElementById("chat-container").className="chat-Output";
connection.send('<div class="bubbleGET"> <font color="white"> User(' + time + '): ' +this.value+ '</font></div>');
console.log(connection.send);
console.log('User (' + time + '): ' +this.value);
win.document.getElementById("chat-container").className="chat-OutputGET";
appendDIV('<div class="bubble"> <font color="white"> User (' + time + '): ' +this.value+ '</font></div>');
this.value = '';
};
var chatContainer = win.document.querySelector('.chat-output');
function appendDIV(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;
}
}
win.document.getElementById（ "コンテナチャット"）クラス名= "チャット-OutputGET"。 doesntの仕事
はここでクラスのCSSです：私はWeb開発に新たなんだと言わざるを得ない
.chat-Output{
position: absolute; bottom: 2.1em;
margin-left: 0.4em;
padding-left: 0.4em;
overflow: scroll;
word-break: break-word;
}
.chat-OutputGET{
position: absolute; bottom: 2.1em;
margin-right: 0.4em;
overflow: scroll;
word-break: break-word;
}
感謝:) 。
で
float:leftと
clear:bothを使用し、ここで私の例を参照してください？ – Reflamerデザインを全くしていませんでした。 –
@Reflamer jsfiddleはdocument.writeを好まない –