Home > Article > Web Front-end > Detailed code explanation of QQ chat message display and comment submission functions using JavaScript
This article mainly introduces in detail JavaScript to implement QQ chat message display and comment submission functions. It has certain reference value. Interested friends can refer to it
QQ chat message display, comment submission and other implementation principles, the specific content is as follows
<!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> <p id="box" class="bos"> <textarea name="" id="txt" cols="30" rows="10"></textarea> <button>submit</button> <ul></ul> </p> </body> </html>
The above is the detailed content of Detailed code explanation of QQ chat message display and comment submission functions using JavaScript. For more information, please follow other related articles on the PHP Chinese website!