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 相关文章推荐
Javascript中各种trim的实现详细解析
Dec 10 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
JavaScript实现世界各地时间显示
Sep 07 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概述.
2006/10/09 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
功能强大的php文件上传类
2016/08/29 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
JS实现拼图游戏
2021/01/29 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
Python找出list中最常出现元素的方法
2016/06/14 Python
Python实现简易Web爬虫详解
2018/01/03 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
python set内置函数的具体使用
2019/07/02 Python
python 实现list或string按指定分段
2019/12/25 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
python创建文本文件的简单方法
2020/08/30 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
婚礼证婚人证婚词
2014/01/13 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
企业业务员岗位职责
2014/03/14 职场文书
2014全国两会心得体会
2014/03/17 职场文书
维修工先进事迹
2014/05/29 职场文书
2019 入党申请书范文
2019/07/10 职场文书
创业计划书之校园超市
2019/09/12 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Python数组变形的几种实现方法
2022/05/30 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript