シンプルなチャットボックス
効果画像：
1.機能紹介
これはシンプルなチャットボックスのインターフェースです。テキストフィールドにコンテンツを入力した後、送信ボタンをクリックすると、メッセージが送信され、メッセージが左右に表示されます。コンテンツが空の場合は、送信ボタンをクリックすると、テキストフィールドの境界が変わります赤色、送信は禁止されており、テキストフィールドの内容は送信が完了するたびにクリアされます。
2.原則の紹介
インターフェーススタイル全体はcssによって記述されます。コンテンツインターフェースには、空のulタグしかありません。現時点では、ulのchildren.lengthは0です。クリックして送信すると、child.length + 1のli、ul、judge、ulが生成されます。長さが奇数の場合は左に表示され（左フローティング）、偶数の場合は右に表示されます（右フローティング）。[注：すべての李をクリアする必要があります（クリア：両方）]
3.特定のコード
HTML構造コード：
<div id="main" class="main">
<ul id="content" class="content"></ul>
<textarea id="msg_input" class="msgInput"></textarea>
<button id="sendbtn" class="sendbtn">发送</button>
</div>
CSSスタイルコード：
*{font-size: 14px; padding:0; margin:0;}
.main{position: relative;margin: 20px auto;border: 1px solid steelblue;width: 430px;height: 400px;}
.msgInput{display: block;width: 406px;height: 60px;margin: 10px auto;}
.sendbtn{position: absolute;width: 100px;height: 29px;bottom: 5px;right: 10px;}
.content{list-style: none;width: 410px;height: 280px;margin: 5px auto;border: 1px dotted ``#D1D3D6;overflow-y: scroll;}
li {clear: both;border-radius: 5px;max-width: 250px;word-wrap: break-word;}
jsコード：
var send=document.getElementById('sendbtn');
var ul=document.querySelector('ul');
var msg=document.getElementById('msg_input');
var content=document.getElementById('content');
//发送按钮点击事件
send.onclick=function(){
//判断：当内容为空时，让文本域边框为红色
if(msg.value==""){
msg.style.cssText='border: 1px solid red;
}else{ //若不为空，则如下：
//让文本域边框颜色恢复原样
msg.style.cssText='border: 1px solid rgb(169,169,169);
//新建标签li【createElement】，并追加到ul标签中【appendChild】
var li=ul.appendChild(document.createElement('li'));
//判断：若ul里新追加的li在奇数位时，左浮动，若在偶数位时，右浮动
if(ul.children.length%2==1){
ul.children[ul.children.length-1].style.cssText='float: left;display: inline-block;background: gray;
}else{
ul.children[ul.children.length-1].style.cssText='float: right;display: inline-block;background: ``orange;
}
//设置新增的li内容为文本域的内容
ul.children[ul.children.length-1].innerHTML=msg.value;
设置滚动条位置，让新增的内容出现在可视窗口最下
content.scrollTop=content.scrollHeight;
}
每发送一次，就清空文本域内容
msg.value="";
}
4.拡大する（興味がある場合は、自分で理解することができます）
テキストフィールドにコンテンツを入力した後、Enterキーを押してコンテンツを送信します
。Consloe.log（e.keyCode）はEnterキーのキー値が13であることを確認できます。コードは次のとおりです。
msg.onkeydown=function(e){
if(e.keyCode == 13){
var li=ul.appendChild(document.createElement('li'));
if(ul.children.length%2==1){
ul.children[ul.children.length-1].style.cssText='float: left;background: gray;'
}else{
ul.children[ul.children.length-1].style.cssText='float: right;background: orange;'
}
ul.children[ul.children.length-1].innerHTML=msg.value;
content.scrollTop=content.scrollHeight;
msg.value="";
}
}
効果画像：
