脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现QQ聊天消息展示和评论提交

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

 更新时间：2017年05月22日 08:51:46   作者：清风明月000  
这篇文章主要为大家详细介绍了JavaScript实现QQ聊天消息展示和评论提交功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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>

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

您可能感兴趣的文章:

相关文章

  • JS脚本加载后执行相应回调函数的操作方法

    JS脚本加载后执行相应回调函数的操作方法

    本文主要讲解怎么在成功加载 js 文件后再执行相应回调任务,对JS脚本加载后执行相应回调函数的操作方法感兴趣的朋友，通过本文学习下吧
    2018-02-02
  • 第一次接触神奇的Bootstrap表单

    第一次接触神奇的Bootstrap表单

    第一次接触神奇的Bootstrap表单，Bootstrap让Web开发更迅速、更简单，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 基于JavaScript判断两个对象内容是否相等

    基于JavaScript判断两个对象内容是否相等

    这篇文章主要介绍了基于JavaScript判断两个对象内容是否相等,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • JS简单实现获取元素的封装操作示例

    JS简单实现获取元素的封装操作示例

    这篇文章主要介绍了JS简单实现获取元素的封装操作,结合实例形式分析了JS针对页面ID、class、TAG元素获取的函数与对象封装操作实现方法,需要的朋友可以参考下
    2017-04-04
  • JavaScript面向对象编程

    JavaScript面向对象编程

    暂时放弃js框架吧 开始写javascript的时候都是自己写，后来发现了prototype.js框架，发现很好用，就一直用的，他的对象创建方法被修改了，但很好用，再后来又转用jquery框架，受此框架影响，也不用自己创建类了，渐渐的竟然忘记了如何自己定义类了，猛的给一个一般方法，竟然看着别扭，混淆了很多东西，忘记了很多东西。今天回头整理下。 一下方法参考prototype.js
    2008-03-03
  • 原生js实现俄罗斯方块

    原生js实现俄罗斯方块

    这篇文章主要为大家详细介绍了原生js实现俄罗斯方块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • JS中eval函数的使用示例

    JS中eval函数的使用示例

    eval函数会将 obj 当做代码去执行一遍，下面举个例子为大家详细介绍下具体的使用方法，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-07
  • 小程序选项卡以及swiper套用（跨页面）

    小程序选项卡以及swiper套用（跨页面）

    这篇文章主要为大家详细介绍了小程序选项卡以及swiper套用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 保证JavaScript和Asp、Php等后端程序间传值编码统一

    保证JavaScript和Asp、Php等后端程序间传值编码统一

    在WEB开发过程中，前后端要求数据编码一致的处理是经常会碰到的！
    2009-04-04
  • 浅谈JS 数字和字符串之间相互转化的纠纷

    浅谈JS 数字和字符串之间相互转化的纠纷

    下面小编就为大家带来一篇浅谈JS 数字和字符串之间相互转化的纠纷。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论