JavaScript实现QQ聊天消息展示和评论提交功能

JavaScript 2019-01-07

QQ聊天消息显示，提交评论等实现原理，具体内容如下

rush:xhtml;"> <Meta charset="UTF-8">

<style type="text/css">

  • {
    margin: 0;
    padding: 0;
    }

.bos {
margin: 100px auto;
width: 350px;
position: relative;
}

.bos a {
float: right;
}

button {
position: relative;
left: 301px;
bottom: 0;
}

textarea {
width: 350px;
resize: none;
}

ul li {
list-style: none;
}

<script type="text/javascript">
window.onload = function() {
var txt = document.getElementById('txt');
var btn = document.getElementsByTagName('button')[0];
var oUl = document.getElementsByTagName('ul')[0];

btn.onclick = function() {
 if(txt.value == '') {
  alert('请输入...');
  return false; //结束事件*******
 }

 var newli = document.createElement('li');  //创建<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a><li></li>
 newli.innerHTML = txt.value + '<a href = "#"&gt;<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a><a>';

 //oUl.appendChild(newli);  //将创建<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a><li></li>加到最后面

 var lis = oUl.childNodes; //oUl.children
 oUl.insertBefore(newli,lis[0]);  //将创建<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a><li></li>加到最前面
 txt.value = '';


 //<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>发出去的消息
 var oA = document.getElementsByTagName('a');
 for(var i = 0; i < oA.length; i++) {
  oA[i].onclick = function() {
   oUl.removeChild(this.parentNode);
  }
 }
}

}

Box" class="bos">