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>

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

Javascript 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
javascript验证身份证号
Mar 03 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
详解js的六大数据类型
Dec 27 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 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
You might like
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP7常量数组用法分析
2016/09/26 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
Python lxml模块安装教程
2015/06/02 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
绩效管理实施方案
2014/03/19 职场文书
负责人任命书范本
2014/06/04 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript