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 相关文章推荐
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
javascript关于“时间”的一次探索
Jul 24 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
js实现网页版贪吃蛇游戏
Feb 22 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逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
php基本函数汇总
2015/07/09 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
python实现对输入的密文加密
2019/03/20 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
施工质量承诺书范文
2014/05/30 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
出租房屋协议书
2014/09/14 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
期中考试复习计划
2015/01/19 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS