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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<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;

}

</style>

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

newli.innerHTML = txt.value + '<a href = "#">删除<a>';

//oUl.appendChild(newli); //将创建标签<li></li>加到最后面

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

oUl.insertBefore(newli, lis[0]); //将创建标签<li></li>加到最前面

txt.value = '';

//删除发出去的消息

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

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

oA[i].onclick = function() {

oUl.removeChild(this.parentNode);

}

}

}

}

</script>

</head>

<body>

<div id="box" class="bos">

<textarea name="" id="txt" cols="30" rows="10"></textarea>

<button>submit</button>

<ul></ul>

</div>

</body>

</html>

以上是 JavaScript实现QQ聊天消息展示和评论提交功能 的全部内容, 来源链接: utcz.com/z/340057.html

回到顶部