编程 Javascript

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

Posted in Javascript onMay 22, 2017

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

清风明月000

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

网页自动跳转代码收集

Sep 27 Javascript

javascript getElementsByTagName

Jan 31 Javascript

Node.js异步I/O学习笔记

Nov 04 Javascript

SyntaxHighlighter 3.0.83使用笔记

Jan 26 Javascript

详解JavaScript中Hash Map映射结构的实现

May 21 Javascript

Bootstrap基本组件学习笔记之列表组(11)

Dec 07 Javascript

Angularjs使用过滤器完成排序功能

Sep 20 Javascript

Vue的elementUI实现自定义主题方法

Feb 23 Javascript

详解ES6 Symbol 的用途

Oct 14 Javascript

vue在自定义组件中使用v-model进行数据绑定的方法

Mar 25 Javascript

vue.js表单验证插件(vee-validate)的使用教程详解

May 23 Javascript

稍微学一下Vue的数据响应式（Vue2及Vue3区别）

Nov 21 Javascript

单行 JS 实现移动端金钱格式的输入规则

May 22 #Javascript

JavaScript表单验证实现代码

May 22 #Javascript

JQuery 封装 Ajax 常用方法(推荐)

May 21 #jQuery

原生JS实现N级菜单的代码

May 21 #Javascript

Ionic + Angular.js实现图片轮播的方法示例

May 21 #Javascript

详解Angular2中Input和Output用法及示例

May 21 #Javascript

Angular2中如何使用ngx-translate进行国际化

May 21 #Javascript