html qq在线聊天功能,JavaScript实现QQ聊天消息展示和评论提交功能

* {

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;

}

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'); //创建标签

newli.innerHTML = txt.value + '删除';

//oUl.appendChild(newli); //将创建标签

加到最后面

var lis = oUl.childNodes; //oUl.children

oUl.insertBefore(newli, lis[0]); //将创建标签

加到最前面

txt.value = '';

//删除发出去的消息

var oA = document.getElementsByTagName('a');

for(var i = 0; i < oA.length; i++) {

oA[i].onclick = function() {

oUl.removeChild(this.parentNode);

}

}

}

}

submit