Simple chat box
Effect picture:
1. Function introduction
This is a simple chat box interface. After entering the content in the text field, click the send button, the message will be sent out, and the message will be displayed on the left and right. When the content is empty, click the send button, and the text field border will change Red, sending is prohibited, and the content of the text field is cleared every time the sending is completed.
2. Principle introduction
The entire interface style is written by css. In the content interface, there is only an empty ul tag. At this time, the children.length of ul is 0. When you click to send, it will generate a children.length+1 of li, ul, judge, ul If the length is odd, it will be displayed on the left (left floating), if it is an even number, it will be displayed on the right (right floating). [Note: Every li must be cleared (clear: both)]
3. Specific code
html structure code:
<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 style code:
*{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 code:
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. Expand (if you are interested, you can understand it yourself)
After entering the content in the text field, press the Enter key to send the content:
Consloe.log (e.keyCode) can find the key value of the Enter key is 13, the code is as follows:
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="";
}
}
Effect picture :
